IE11 is not responding due to a long running script error with Webpack + React + TypeScript

Question

I am using webpack 4.* to bundle my react 16.* and typescript 3.* project, On our beloved internet explorer 11: I get: not responding long running script error and project never loads... both in local and test server (production mode)

I can not find out which side of the project is not supported by IE11 as it does not give me that much information and I also could not find anything similar in the internet... here is how it looks:

and my relevant setup are:

webpack.base.js

module.exports = {
    entry: {
        app: path.resolve(__dirname, "./src/index.tsx"),
    },
    output: {
        path: path.resolve(__dirname, "./build/dist"),
        publicPath: "public",
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json", ".sass"],
        alias: {
            // .... some internal aliases
        },
    },
    module: {
        rules: [
            {
                enforce: "pre",
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
            },
            {
                test: /\.(ts|tsx)?$/,
                exclude: /node_modules/,
                loader: "ts-loader",
            },
            {
                test: /\.(gif|jpg|jpeg|svg|png|webp|eot|otf|ttf|woff|woff2|mp4|ogg|webm)$/i,
                loader: "url-loader",
                options: {
                    limit: 1,
                    name: "[name].[hash:8].[ext]",
                },
            },
        ],
    },
    optimization: {
        runtimeChunk: "single",
        splitChunks: {
            chunks: "all",
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "initial",
                    name: "vendor",
                    enforce: true,
                },
            },
        },
    },
    plugins: [
        new webpack.DefinePlugin({
            // ...
        }),
        new HtmlWebpackPlugin({
            template: "src/index.ejs",
            hash: true,
            // ... some internal values to be injected to the template, like gtm and etc
        }),
    ],
}

tsconfig.json

"compilerOptions": {
    "module": "esnext",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "esModuleInterop": true,
    "jsx": "react",
    "moduleResolution": "node",
    ...
}

index.tsx

import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";
import React from "react";
...

I think it can be more related to my code rather than the 3rd party libs... I do not have jQuery used and very same code works fine with nwb ! I just changed the bundler to webpack and updated npm packages to their recent versions

If further info was needed, I can share it via post updates

Answer 1

I've the same issue with XRegExp. Seems including that in the webpack bundle generates this memory link. In my case I include XRegExp in my index.html and it works...

<script src="https://unpkg.com/xregexp/xregexp-all.js"></script>

Answer 2

The issue was a huge memory leak, somehow caused by xregexp@4.3.0 !

Since it was only used in two places, I got rid of the package and replaced it with built-in RegExp and all is fine now!

My initial mistake though was that I relied too much on Network tab! Performance section in the DevTool was way more efficient and helpful