react app with webpack/babel appears blank on IE browser

Question

I have react-hooks app built with react-router, redux, webpack4, babel. and I can not get react app renders on IE browser.

I guess it's an issue with transpiling es6 to es5.

Here's things that I have tried. None of them worked though.

index.html

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>

index.js imported 'core-js' or 'react-app-polyfill' at the very time of the index fild.

import 'core-js';
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/ie11';

babel.js add targets options to env.

presets: [
    [
      'env',
      {
        useBuiltIns: 'entry',
        targets: {
          browsers: [
            'last 1 version',
            '> 1%',
            'not dead',
            'ie >= 9'
          ],
          uglify: true,
        },
        loose: true,
        modules: isTest ? 'commonjs' : false,
        debug: isTest ? false : true,
      },
    ],
    'react',
  ],
plugins: [
    'transform-runtime',
    'transform-class-properties',
    'transform-object-rest-spread',
    'syntax-dynamic-import',
]

package.json

"browserslist": [
    "last 1 version",
    "> 1%",
    "not dead",
    "ie >= 9"
  ],

webpack.base.js add browsers option to 'postcss-loader, autoprefixer'.

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: 'babel-loader',
            options: babelConfig,
          },
        ],
      },
      {
        test: /\.(sa|sc|c)ss$/,
        exclude: /node_modules/,
        use: [
          {
            loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: {
              minimze: true,
              sourceMap: devMode,
              importLoaders: 1,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              indent: 'postcss',
              plugins: [
                autoprefixer({
                  browsers: ['last 1 version',
                             '> 1%',
                             'not dead',
                             'ie >= 9'
                  ],
                }),
              ],
              sourceMap: devMode,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: devMode,
              includePaths: ['client/styles/main.scss'],
            },
          },
        ],
      },
    ],
  },
 ...
  },

versions

"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^4.3.1",
"connected-react-router": "^6.4.0",
"react-redux": "^6.0.0",
"webpack": "^4.16.5",
"babel-core": "^6.26.3",
"core-js": "^2.5.7",
"react-app-polyfill": "^1.0.2",

------------------------------- EDITION ---------------------------------

UPDATE : added error message in IE browser and created code Sandbox.

code sandbox link

------------------------------- EDITION ---------------------------------

After having updated to the latest IE version. I am getting a Back navigation caching error and JS syntax error in vendors.lazy-chunk.js.

------------------------------- EDITION ---------------------------------

login feature code sample update. code sample

Answer 1

I reproduced your code in my side and made it run without any error in IE 11. You could refer to my steps:

1. Create a react app using create-react-app.

2. I used the files in your CodeSandbox, and modified some of them.

(1) You could check my package.json.

(2) I also modified the index.js, we only need to add import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable'; at the first line of index.js to make it compatible with IE 11.

(3) I also modified import createBrowserHistory from "history/createBrowserHistory"; into import { createBrowserHistory } from 'history'; in store.js. Otherwise, it will throw the error "Warning: Please use require("history").createBrowserHistory instead of require("history/createBrowserHistory"). Support for the latter will be removed in the next major release."

3. Install the following packages manually. Pay attention to that the webpack version is 4.39.1. In my case, I also installed node-sass:

4. Run npm start to start the app. The screenshot in IE 11 is like this: https://i.stack.imgur.com/aTq5G.png.

You could also check my sample here: https://stackblitz.com/edit/react-vhafos.