React + Webpack 5 + Babel 7 IE11 issue -- not attaching to root

Question

I have been scouring the internet for solution after solution and nothing seems to be working for me so I'm requesting help.

Issue: No matter what I do, I can't get anything inside my root div. There are no console errors at all in IE11. The app works fine on chrome, ff, & safari.

Dependencies / Versions

• "react": "^17.0.2",
• "@babel/core": "^7.14.6",
• "babel-loader": "^8.2.2",
• "core-js": "^3.8.0",
• "webpack": "^5.41.1",

index.js

import "core-js/stable";
import "regenerator-runtime/runtime";
import React from 'react';
import ReactDOM from 'react-dom';

//simplified my app down to just this p tag and still nothing
ReactDOM.render(
  <p>hello world</p>,
  document.getElementById('root'),
);

package.json

{
  "scripts": {
    "build": "webpack",
    "start": "webpack serve",
    "test": "npx jest",
    "format": "prettier --write \"src/**/*.{js,jsx}\"",
    "lint": "prettier --check \"src/**/*.{js,jsx}\"",
    "preinstall": "npx npm-force-resolutions",
    "echo": "echo \"Testinig gradle scripts with npm\" && exit 1"
  },
  "sideEffects": false,
  "jest": {
    "moduleNameMapper": {
      "\\.(css|less)$": "identity-obj-proxy"
    },
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!<rootDir>/node_modules/"
    ],
    "verbose": true,
    "coverageReporters": [
      "html"
    ]
  },
  "resolutions": {
    "chokidar": "^3.4.3"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie < 11",
    "not op_mini all"
  ],
  //also tried this for browserlist
  //"browserlist": [
  //  "ie 11"
  //]
  "dependencies": {
    "@material-ui/core": "^4.12.0"
    "@reduxjs/toolkit": "^1.6.0",
    "connected-react-router": "^6.4.0",
    "history": "^4.10.1",
    "jest": "^26.6.3",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-intl": "^5.20.4",
    "react-redux": "^7.2.4",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-test-renderer": "^17.0.2",
    "redux": "^4.1.0",
    "regenerator-runtime": "^0.13.7"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.7",
    "@babel/preset-react": "^7.14.5",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "babel-loader": "^8.2.2",
    "core-js": "^3.8.0",
    "css-loader": "^5.2.6",
    "html-webpack-plugin": "^5.3.2",
    "http2-proxy": "^5.0.53",
    "identity-obj-proxy": "^3.0.0",
    "path": "^0.12.7",
    "prettier": "^2.2.1",
    "style-loader": "^3.0.0",
    "webpack": "^5.41.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2",
    "webpack-manifest-plugin": "^3.1.1",
    "webpack-nano": "^1.1.1"
  }
}

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const options = {
  fileName: 'asset-manifest.json'
};

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "[name].[contenthash].js",
    // filename: "index.bundle.js",
    publicPath: '/',
    clean: true,
  },
  mode: process.env.NODE_ENV || "development",
  resolve: { modules: [path.resolve(__dirname, "src"), "node_modules"] },
  devServer: {
    contentBase: path.join(__dirname, "src") ,
    port: 3001,
    host: 'myapp0001.localhost',
    proxy: {
      '/admin/api': {
        target: 'http://myap0001.localhost:8080'
      }
    },
    historyApiFallback: true,
  },
  devtool: 'source-map',
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "public", "index.html"),
    }),
    new WebpackManifestPlugin(options),
  ],
  optimization: {
    // splitChunks: { chunks: "all" },
    // runtimeChunk: { name: "runtime" },
    usedExports: true,
  },
  target: ['web', 'es5'],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                useBuiltIns: 'usage',
                corejs: 3,
              }]
            ]
          }
        }
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ]
  }
};

babel.config.js

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
  plugins: ['@babel/plugin-transform-runtime']
};

When I view this in IE11, I get the following html

<html>
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <!-- Because edge adds icons on their inputs -->
    <style>input::-ms-reveal, input::-ms-clear {display: none;}</style>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="My App" />
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script type="module" src="/main.1ec970745dfb9692d654.js"></script>
  </body>
</html>

I also receive 0 console warnings & 0 errors

Things I've tried

1. Adding target: ['web','es5'] to my webpack.config.js
2. installing react-app-polyfill and adding the following to the top of index.js even though I didn't use create-react-app

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import "core-js/stable";
import "regenerator-runtime/runtime";
import React from 'react';
import ReactDOM from 'react-dom';

3. removing my browserlist from package.json and using the following webpack config

presets: [
  ['@babel/preset-env', {
    corejs:"3",
    useBuiltIns: 'entry',
    targets: {
      browsers: [
        "edge >= 16",
        "safari >= 9",
        "firefox >= 57",
        "ie >= 11",
        "ios >= 9",
        "chrome >= 49"
      ]
    }
  }]
]

I am at my wit's end. I can't get any warnings in the console to assist me -- Any and all help will be supremely appreciated.

Answer 1

I didn't need the browserlist in package.json nor webpack.config.js, I did however need the target: ['web','es5'] in my webpack.config.js. My issue was this & the suggestion from @matthiasgiger -- even though I had set modules to false for my output environment, removing the type="module" was they key