Why IE 11 display blank page rendering react app

Question

I have an issue with IE 11 and my react app. I use Webpack, babel and polyfill.io cdn and all is nice until rendering bundeled file, then it stops doing anything. Do you have any idea what may go wrong?

Thanks in advance.

Answer 1

React is not compatible right away with IE,

From the official documentation :

React supports all popular browsers, including Internet Explorer 9 and above, although some polyfills are required for older browsers such as IE 9 and IE 10.

We don’t support older browsers that don’t support ES5 methods, but you may find that your apps do work in older browsers if polyfills such as es5-shim and es5-sham are included in the page. You’re on your own if you choose to take this path.

---

To make your application work on IE (11 or 9) you will have to install React-app-polyfill :

https://www.npmjs.com/package/react-app-polyfill

Features :

Each polyfill ensures the following language features are present:

Promise (for async / await support)
window.fetch (a Promise-based way to make web requests in the browser)
Object.assign (a helper required for Object Spread, i.e. { ...a, ...b })
Symbol (a built-in object used by for...of syntax and friends)
Array.from (a built-in static method used by array spread, i.e. [...arr])

Usage

First, install the package using Yarn or npm:

npm install react-app-polyfill

Now, you can import the entry point for the minimal version you intend to support. For example, if you import the IE9 entry point, this will include IE10 and IE11 support.

Internet Explorer 9

// This must be the first line in src/index.js
import 'react-app-polyfill/ie9';

// ...

Internet Explorer 11

// This must be the first line in src/index.js
import 'react-app-polyfill/ie11';

// ...

---

You can also configure your manifest to handle different browsers, using the following doc : https://github.com/browserslist/browserslist

example :

"browserslist": [
    ">0.2%",
    "not dead",
    "ie >= 9"
]

---

More information from the official site

Answer 2

For anybody else who stumbles upon this problem,

If react-app-polyfill doesn't work for you, try core-js instead.

$ npm install core-js

Make sure this is the first line in your src/index.js file:

import 'core-js/stable'

Also you might not see the fix when you are in development.

For me the issue was solved only in the production version (react build)

Answer 3

The package react-app-polyfill will help to work react app in ie9 & ie11. This will work both in development and production environment.

Please follow the steps 1. Edit the index.js file and add the following lines at the very top of the file.

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

2. Edit the Package.json file and add "ie 11" in the development sections of the browserslist. The default prouduction list is quite generous and does include ie 11 already via the >0.2%

   "browserslist": {
   "production": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version",
     "ie 11"
   ]
   

   }

3. delete your entire node_modules folder

4. run npm install to re-install the node_modules

5. run npm start to run again

Answer 4

react-app-polyfills works for me only in production, not in dev. Build, deploy and then test it.

Answer 5

If you are using Object.assign() in your reducer (for example) or some other functions that IE11 doesn't support without polyfilling you would have this problem.

Answer 6

I tried the solutions offered above but still couldn't get the page to work on IE11 nor in my old iOS 9.3.2...

I did exactly as suggested by @Treycos and @Kurisubo but no resolution; to resolve, had to replace es6 arrow function from my functional component into old school declarative style and the page loaded on IE 11 and iOS 9.3.2

NOTE: this functional component was the first component which was rendered on the page

Adding this here so that someone can benefit in the future.

Answer 7

Try the following way must be solved the problem:-

Step1:- First install the packages:-

npm install react-app-polyfill

or

yarn add react-app-polyfill

Step 2: - Add the below command in the top of your index.js file:-

import 'react-app-polyfill/ie11';

import 'react-app-polyfill/stable';

Step 3 :- Replace the browserlist portion by the following in your package.json file:-

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie >= 9"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }

Step 4:- Delete the node-module, package.lock.json, yarn.lock and then run the below command:-

 yarn

 yarn start

or
npm install

npm start

Answer 8

For those who have attempted to use the 'react-app-polyfill/xxx' and were unsuccessful.

First: Make sure to import those in your 'index.js' file (the file with 'ReactDOM.render(<React.StrictMode>...)'.

Second: Make sure you import it at the top of your code. Above the "import React from 'react'."

Answer 9

Not any polyfill on earth seemed to help so I debugged for ages and finally figured out from a React developer "error" (only seen in IE11 dev. tools):

The above error occurred in the <h2> component:
in h2 (created by CMSHeading)
// ...

Which had:

const {
  ...styles
} = this.props;
return (<h2 styles={styles}>...</h2>);

The only thing was that I was accidentally sending other stuff down that wasn't just css styles but Objects etc. So I made sure that I was only sending real styles to it and then everything started working again :)