获取使用在 IE11 中工作的 create-react-app 创建的应用程序

Question

I have created my React application using create-react-app version 3.3.0 . My application works fine in all browsers except IE11.

The errors in the console is

HTML1300: Navigation occurred.
localhost:3000

SCRIPT1002: Syntax error
1.chunk.js (107,34)

SCRIPT1002: Syntax error
main.chunk.js (183,26)

I have seen many many posts about this and I believe I have followed all the steps that blogs/stackover flow posts say have to be done but nothing seems to fix my application.

My package.json contains, see it contains IE11 in the browser list

 "dependencies": {
    "prop-types": "^15.7.2",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-router-dom": "~5.1.2",
    "react-scripts": "~3.2.0"
  },
  "devDependencies": {
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.20.0",
    "eslint-plugin-react-hooks": "^2.5.1"
  },
  "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"
    ]
  }

My "index.jsx" contains

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import ComponentA from './components/ComponentA';
import ComponentB from './components/ComponentB';

render(
  (
    <Router >
      <Layout>
        <Switch>
          <Route exact path="/" component={ComponentA} />
          <Route exact path="/b" component={ComponentB} />
        </Switch>
      </Layout>
    </Router>
  ),
  document.getElementById('root'),
);

I run my application by doing the following

• delete the "node-modules" folder
• run "npm install"
• run "npm start"

Fix Attempt 1: react-app-polyfill

package.json

npm install react-app-polyfill

It is added to "package.json" as a dependency

 "dependencies": {
    .....
    "react-app-polyfill": "^1.0.6",
    ....
  },
    

index.jsx

In index.jsx I added the following imports as the FIRST imports

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

Result

IE still shows a blank page and the same error in the console

Fix Attempt 2: @babel/polyfill

package.json

npm install @babel/polyfill

It is added to "package.json" as a dependency

 "dependencies": {
    .....
    "@babel/polyfill": "^7.10.1",
    ....
  },
    

index.jsx

In index.jsx I added the following imports as the FIRST imports

import '@babel/polyfill';

Result

IE still shows a blank page and the same error in the console

Fix Attempt 3: core-js

package.json

npm install core-js

It is added to "package.json" as a dependency

 "dependencies": {
    .....
    "core-js": "^3.6.4",
    ....
  },
    

index.jsx

In index.jsx I added the following imports as the FIRST imports

import 'core-js';

I also tried

import 'core-js/stable';

Result

IE still shows a blank page and the same error in the console

NOTE

When I tried each option I did the following

• Installed the relevant package ensuring its added to package.json
• edited "index.jsx" accordingly
• delete the "node-modules" folder
• run "npm install"
• run "npm start"

What am I doing wrong that all the fixes mentioned in other posts/blogs are not working for me.

Answer 1

Strangely i now have this working, I am not sure what I changed to get it working. However this is what i currently have.

package.json

"dependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.11.0",
    "react-app-polyfill": "^1.0.6",
    "react-dom": "^16.11.0",
    "react-masonry-component": "^6.2.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.2.0"
  },

"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"
    ]
  }

index.jsx

// these 2 MUST be the first 2 imports
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';