CODEWITHSUNDEEP
reactjsinternet-explorer-11
Sparky the Wonder Dog
Sparky the Wonder Dog

Reputation: 33

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?

Upvotes: 3

Views: 8994

Answers (3)

madannes
madannes

Reputation: 563

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'

Upvotes: 1

Yu Zhou
Yu Zhou

Reputation: 12961

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.

Upvotes: 20

Russell
Russell

Reputation: 189

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

// ...

Upvotes: 0

Related Questions