1

I went through Why IE 11 display blank page rendering react app - I am stumped - it works in localhost:3000 in IE11 - shows test.

But when I generate the js file as : node ./node_modules/webpack/bin/webpack.js --config webpack.prod.js

webpack.prod.js :

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
});

webpack.common.js :

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "../js/frontend"),
    filename: "frontend.js",
  },
  module: {
    rules: [
      {
        test: /\.js|.jsx$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
};

IE11 shows an error whereas FireFox shows test.

IE11

frontend.js

index.js :

import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<React.StrictMode><App /></React.StrictMode>, document.getElementById('app'));

App.js

import React from "react";

class App extends React.Component {
  render()
  {
    return (<div>Test</div>);
  }
}

export default App;

package.json

"react-app-polyfill": "^3.0.0",
...
"scripts": {
    "react": "react-scripts start",
    "start": "webpack --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "IE 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "IE 11"
    ]
  },
  "devDependencies": {
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
anjanesh
  • 3,771
  • 7
  • 44
  • 58
  • As noted [here](https://www.npmjs.com/package/react-app-polyfill) you just need to add the polyfill imports to `src/index.js`. No need to roll your own webpack configs or run webpack directly. Just run the plain old 'react-scripts build' instead (what already came with CRA). – Shreshth Mar 23 '22 at 17:23
  • index.js first lines are `import "react-app-polyfill/ie11"; import "react-app-polyfill/stable";` - the webpack is run directly because it's inserted to a Django templates' DIV tag. – anjanesh Mar 23 '22 at 17:54
  • Please elaborate "the webpack is run directly because it's inserted to a Django templates' DIV tag" – Shreshth Mar 23 '22 at 17:58
  • 1
    The problem is that `create-react-app` adds a bunch of "magic" under the hood to create a "proper" output bundle upon build. I don't think your webpack config is transpiling the code with IE 11 as target (missing babel preset, core-js and so on) (basically its missing the CRA magic) – Shreshth Mar 23 '22 at 18:00
  • If you don't wish to use create-react-app, create a separate project with webpack (sans CRA) and share a minimal codesanbox here. – Shreshth Mar 23 '22 at 18:01
  • Adding a `.babelrc` (with @babel/preset-env, core-js & useBuiltIns) could be a way to fix this in your current project setup though – Shreshth Mar 23 '22 at 18:05
  • Are you using Create React App? If so, as you have added `react-app-polyfill`, I think it should work with running `npm run build` and then `serve -s build`. If you're not using CRA, please provide a minimal code snippet which can reproduce the issue. You can use some online code editor like CodeSandBox to provide the sample. – Yu Zhou Mar 24 '22 at 06:43
  • I tested with `npm run build` and its working. The webpack tooling setup was done manually which I think needs fixed to make use of babelrc etc as suggested by @Shreshth. – anjanesh Mar 24 '22 at 08:47
  • @anjanesh This video explains a problem very similar to what you're facing. Might help. https://youtu.be/YXtQms2msZQ – Shreshth Mar 24 '22 at 09:36
  • I set `optimization: { minimize: false, },` for build. I got error in IE11 at `class App extends react.Component {` – anjanesh Mar 24 '22 at 11:41
  • I follow the steps in [this blog](https://dev.to/deadwing7x/setup-a-react-app-with-webpack-and-babel-4o3k) to setup a React app with Webpack and Babel, then I add `target: ['web', 'es5']` in **webpack.config.js** and it works well in IE 11. I think you can also refer to it. You can also refer to [this thread](https://stackoverflow.com/questions/65035451/how-to-create-ie11-bundles-with-webpack-5-and-babel-7). – Yu Zhou Mar 30 '22 at 09:11

0 Answers0