Create-react-app: Apps with `react-scripts` v4.0.0 do not work in IE11

If I'm not mistaken, a new project won't work on IE at all in development mode due to the browserslist configuration.

(see package.json).

@Pierre-Do
Yes, I updated my issue with the missing information.
I forgot that IE11 is not supported out of the box, but with react-app-polyfill is not working as well :(

+, same issue on the production build
https://reactjs.org/docs/error-decoder.html/?invariant=31&args[]=object%20with%20keys%20%7B%24%24typeof%2C%20type%2C%20key%2C%20ref%2C%20props%2C%20_owner%7D

my workaround:

import 'react-app-polyfill/ie11';
// import 'react-app-polyfill/stable';
import 'core-js/stable';
import 'regenerator-runtime/runtime';

I'm also affected by this issue

I can confirm that @ezBill solution works for me.
Maybe react-app-polyfill need to be fixed?

I can confirm that @ezBill solution works for me.

+1

The workaround isn't working for me, the error remains.

My polyfills look like this and I have no problem with IE11:

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

Note that these must come above any other imports that would break without these polyfills in place. Plus the polyfill doesn't provide some more esoteric APIs like TextEncoder so you'll still need to load polyfills for those if you need them for some reason.

I think the new jsx transform is causing this, try disabling it either by adding /** @jsxRuntime classic */ to the top of your main index.js where you also import your polyfills - or set DISABLE_NEW_JSX_TRANSFORM=true environmental variable. In my case either of those fixes this.

My guess is that by importing polyfills first you can get them to load before react, but you can't get them to load before the import {jsx as _jsx} from 'react/jsx-runtime'; line that the compiler inserts.

@msbarry I can confirm that this fixes the issue here. Thank you for the help!

We ran into this same issue. We had already converted a lot of our code base to the new JSX format though (the format where you don't need to import React anymore).

Good news! We were able to keep the all of the new JSX syntax!

We only had to apply this to the top of our src/index.js file.

/** @jsxRuntime classic */
import 'react-app-polyfill/ie11'

// IE11 needs "jsxRuntime classic" for this initial file which means that "React" needs to be in scope
// https://github.com/facebook/create-react-app/issues/9906
import React from 'react'

Added the comment because otherwise we could see this being something people wouldn't understand and would probably leave hanging around in the codebase forever.

The only downside is that we don't get to have treeshaking reduce our bundle size which was one of the key reasons we upgraded to React 17 in the first place :(

FWIW we split the index.ts file into an init.ts and main.tsx file where init.ts imports all relevant polyfills and main.tsx is the actual entrypoint (containing React code) and index.ts just imports both in sequence. This ensures any modules that may need the polyfills to be in effect are loaded after the polyfills and the naming ensures that even when using automatic sorting of imports the polyfills come before the main entry point.

This may be a more workable solution than having to work around this issue.

None of the above seems to be working.

IE11 errors with

Clicking on the error brings us here

IE version

Here's a super simple example to reproduce

1. npx create-react-app ie11app
2. yarn add react-app-polyfill
3. Update the index.js

/** @jsxRuntime classic */
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <div>Come on</div>,
  document.getElementById('root')
);

1. Add ie 11 to browerslist in package.json

{
  "name": "ie11app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-app-polyfill": "^2.0.0",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }
}

1. yarn start

Try removing import 'react-app-polyfill/stable'; from index.js.

You only need import 'react-app-polyfill/ie11'

That doesn't look like a polyfill issue. The code you're seeing in the debugger is not ES5, it uses destructuring and default arguments, neither of which are supported by IE11. Try using "ie >= 11" in your browserslist instead of "ie 11". It's what I have, not sure if either syntax should work.

@Dan503 @pluma I tried both, "ie >= 11" and removing import 'react-app-polyfill/stable';, but still no luck.

Could you be so kind and create a new npx create-react-app ie11app and check if it actually is still working for you on IE11?

Thank you

Update:
Reverting back to "react-scripts": "^3.0.0" works on IE 11 even with "react": "^17.0.1",
But "react-scripts": "4.0.0" is still broken for me

I also tried many of these solutions. The only one that worked was downgrading react-scripts to 3.4.4.