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"
  }
11
  • As noted here 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
    Commented Mar 23, 2022 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
    Commented Mar 23, 2022 at 17:54
  • Please elaborate "the webpack is run directly because it's inserted to a Django templates' DIV tag"
    – Shreshth
    Commented Mar 23, 2022 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
    Commented Mar 23, 2022 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
    Commented Mar 23, 2022 at 18:01

0

Browse other questions tagged or ask your own question.