TypeError: Cannot read property 'toStringTag' of undefined

[emilmuller]

First off, I'm not sure if I should report this in the babel repo or here :)

Trying to polyfill for ie11, getting this while compiling:

TypeError: Cannot read property 'toStringTag' of undefined
[...]

(it goes away if I remove the ie11 requirement).

Is there some polyfill for ie11 missing? core-js/modules/es.symbol? Should it be included?

Here's my webpack.prod.config:

module.exports = require("./webpack.config.base")({
    path: "wwwroot", targets: {
        ie: "11",
        edge: "14",
        firefox: "39",
        chrome: "42",
        safari: "10.1",
        opera: "29",
        ios: "10.3"
    }
});

And here's my webpack.base.config:

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
//const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { InjectManifest } = require("workbox-webpack-plugin");

const packageJson = require("../package.json");

const TerserJSPlugin = require("terser-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = options => {

    for (let p of ["path"])
        if (!options.hasOwnProperty(p))
            throw new Error(`Missing property '${p}}'`);

    let isDevelopment = !!options.isDevelopment, presets = ["@babel/typescript"];

    if (options.targets)
        presets.unshift(["@babel/env", { targets: options.targets, useBuiltIns: "usage", corejs: "3.3" }]);

    let copyWebpackPluginArgs = [
        { from: "./Client/src/fonts", to: "fonts" }
    ];

    let result = {

        performance: { hints: false },

        entry: "./Client/src/index.tsx",
        output: {
            filename: "[name].[contenthash].js",
            path: path.resolve(__dirname, "../", options.path)
        },
        resolve: {
            extensions: [".ts", ".tsx", ".js", ".scss"],
            modules: ["node_modules"]
        },
        module: {
            rules: [
                {
                    test: /\.(js|ts|tsx)$/,
                    loader: "babel-loader",
                    options: {
                        ignore: [ // See https://github.com/webpack/webpack/issues/4039 and https://stackoverflow.com/questions/52407499/how-do-i-use-babels-usebuiltins-usage-option-on-the-vendors-bundle/52415747#52415747
                            /\/core-js/
                        ],
                        sourceType: "unambiguous",
                        presets: presets,
                        plugins: [
                            "@babel/proposal-class-properties",
                            "@babel/plugin-transform-react-jsx",
                            "@babel/plugin-syntax-dynamic-import",
                            "ts-optchain"
                        ]
                    }
                },
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader
                        },
                        {
                            loader: "css-loader",
                            options: {
                                modules: {
                                    localIdentName: isDevelopment ? "[path][name]__[local]" : "[hash:base64]"
                                },
                                sourceMap: true
                            }
                        },
                        {
                            loader: "postcss-loader",
                            options: {
                                plugins: function () {
                                    return [
                                        require("precss"),
                                        require("autoprefixer")
                                    ];
                                }
                            }
                        },
                        {
                            loader: "sass-loader",
                            options: {
                                includePaths: ["./node_modules"],
                            }
                        }
                    ]
                }
            ]
        },
        plugins: [
            new webpack.DefinePlugin({
                IS_DEV: JSON.stringify(isDevelopment),
                IS_PROD: JSON.stringify(!isDevelopment),
                VER: JSON.stringify(packageJson.version),
            }),
            new HtmlWebpackPlugin({
                title: packageJson.title,
                template: "./Client/src/index.html",
                filename: "index.html",
                inlineSource: ".(js|css)$",
                //favicon: "./Client/src/favicon.ico"
            }),
            //new HtmlWebpackInlineSourcePlugin(),
            new MiniCssExtractPlugin({ filename: "[name].[contenthash].css" }),
            new CopyWebpackPlugin(copyWebpackPluginArgs),
            new InjectManifest({
                swSrc: "./Client/src/service-worker.ts",
                dontCacheBustURLsMatching: /\.[0-9a-f]{20}\.(js|css)$/,
                exclude: ["index.html"]
            })
        ]
    };

    if (isDevelopment) {
        result.devtool = "inline-source-map";
    }

    else {
        result.devtool = "nosources-source-map"; // TODO: Not working?
        result.optimization = { minimizer: [new TerserJSPlugin(), new OptimizeCSSAssetsPlugin()] };
    }

    return result;
};

[zloirock]

I can't say anything since I don't see required information, but if you expect toStringTag - sure, core-js/modules/es.symbol should be injected.

[Airkro]

I have the same problem, es.symbol polyfill for older browsers will cause errors for all browsers，it is not working fine for a long time.

The problem usually appears in well-known-symbol.js.

I had to manually replace core-js/internals/global with module.exports = window; to make it work.

[Airkro]

About #513

I don't think it's a rollup issue, I am using webpack.

In my case, this problem appear when core-js > 3.0.1

[zloirock]

...ook.

I had to manually replace core-js/internals/global with module.exports = window; to make it work.

Could you check how it works for you?

[zloirock]

@Airkro seems your problem started when core-js started to check globalThis as a global object. So I see those options: you can transpile core-js by babel and have recursion or you just have broken globalThis polyfill loaded before core-js.

[zloirock]

It seems the answer above. Due to lack of reactions, closed as can't reproduce.