Starter create-react-app with IE11 polyfill import still aborts in IE11

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?

Contents hide

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

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

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

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

// ...

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating