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

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

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

[ezBill]

my workaround:

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