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

[yhnavein]

Describe the bug

After upgrading my app from react-scripts 3.4.4 to 4.0.0 I see that app does not work in IE11 at all.
Additionally - when I created a new app from the latest CRA, added react-app-polyfill I see it's also not working at all.

My package.json looks like this:

{
  "name": "cra4",
  "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",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "react": "^17.0.1",
    "react-app-polyfill": "2.0.0",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "typescript": "^4.0.3",
    "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"
    ],
    "development": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
}

The same error appears also when I run yarn build and serve from build/ directory.

Did you try recovering your dependencies?

It's the default CRA behaviour.

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

Environment Info:

  current version of create-react-app: 3.4.1
  running from C:\Users\XXX\AppData\Local\Yarn\Data\global\node_modules\create-react-app

  System:
    OS: Windows 10 10.0.19041
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
  Binaries:
    Node: 14.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.19041.423.0
    Internet Explorer: 11.0.19041.1
  npmPackages:
    react: ^17.0.1 => 17.0.1
    react-dom: ^17.0.1 => 17.0.1
    react-scripts: 4.0.0 => 4.0.0
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Create new CRA app with typescript template used
2. yarn add react-app-polyfill
3. Add import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable'; to the top of index.tsx
4. yarn start
5. Observe that site works perfectly in normal browsers and it's a blank screen in the IE

Expected behavior

Site should work (I am not expecting miracles. It's a IE overall, but blank page is very bad)

Actual behavior

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[Pierre-Do]

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).

[yhnavein]

@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 :(

[e965]

+, 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

[ezBill]

my workaround:

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

[Vazerthon]

I'm also affected by this issue

[yhnavein]

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

[Vazerthon]

I can confirm that @ezBill solution works for me.

+1

[s5no5t]

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

[pluma]

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.

[msbarry]

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.

[s5no5t]

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

[Dan503]

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 :(

[pluma]

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.