3

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?

Sparky the Wonder Dog
  • 33
  • 1
  • 5

3 Answers3

20

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'; at the first line in src/index.js.

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

enter image description here

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.

Halit Ogunc
  • 50
  • 6
Yu Zhou
  • 11,532
  • 1
  • 8
  • 22
  • 2
    That did it! Thank you so much! We were missing the BROWSERLIST info. So close and yet so far... Turns out I am too new to upvote this perfect answer. if others who can upvote would please do so! – Sparky the Wonder Dog Jun 04 '19 at 17:55
1

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'
madannes
  • 523
  • 1
  • 8
  • 14
0

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';

// ...
Russell Ratcliffe
  • 179
  • 1
  • 13