带有 IE11 polyfill 导入的 Starter create-react-app 仍然在 IE11 中中止

Question

Using: react 16.8.6. Working in: Dev Mode.

1) Do: npm create-react-app my-app

2) cd my-app

3) add: import "react-app-polyfill/ie11"; as the new first line in index.js

4) do: npm start

5) In IE11 on Windows 10 it aborts with these in the console:

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

SCRIPT1002: Syntax error main.chunk.js (154,1)

I have tried other polyfills:

import "react-app-polyfill/ie9";

and

import 'react-app-polyfill/stable';

and

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

and

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

The location of the Syntax error changes, but it still happens.

Works fine in all other browsers.

import "react-app-polyfill/ie11";
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.css";

ReactDOM.render(<App />, document.getElementById("root"));

The abort happens immediately before the generated code ever loads. It gives the old 'White screen of death' in IE11.

Can anyone share the magic to get the 16.8.6 starter app to work in IE11?

Answer 1

You can refer to the following steps to support IE11:

First, install the package: npm install react-app-polyfill .

Second, add import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable'; import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable'; at the first line in src/index.js.

Third, add ie 11 in package.json like this:

Finally, you can restart your app and it will work in IE11. If it still doesn't work, delete the app and create it again according to the above steps.

Answer 2

As of late 2020, react-scripts 4.0.0 seems to be having issues with react-app-polyfill and IE 11, as detailed in https://github.com/facebook/create-react-app/issues/9906 .

My workaround, at the top of my index.js (multiple others shown in the link above)

// https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill
import 'react-app-polyfill/ie11'
// https://github.com/facebook/create-react-app/issues/9906
// this is currently borked -> import 'react-app-polyfill/stable'
// so use core-js.. which might be the "right" way now per
// https://reactjs.org/docs/javascript-environment-requirements.html
import 'core-js/stable'

Answer 3

https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md

yarn add react-app-polyfill

// These must be the first lines in src/index.js
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

// ...