question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

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

image

Reproducible demo

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

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:34
  • Comments:50

github_iconTop GitHub Comments

40reactions
msbarrycommented, Oct 30, 2020

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.

16reactions
ezBillcommented, Oct 27, 2020

my workaround:

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

React app is not working in IE 11 browser - Stack Overflow
It seems an issue with react-scripts version 3.3.0. You could find the issue report in GitHub: issue 1, issue 2. It can still...
Read more >
To v5 from v4 - webpack
This guide aims to help you migrating to webpack 5 when using webpack directly. If you are using a higher level tool to...
Read more >
Create-React-App Does Not Work In Ie Despite Polyfills And ...
Create-react-app: Apps with `react-scripts` v4.0.0 do not work in IE11 the latest CRA, added react-app-polyfill I see it's also not working at all....
Read more >
React v16.0 – React Blog
0.0 is available on the npm registry. To install React 16 with Yarn, run: yarn add react@^16.0.0 react-dom@^ ...
Read more >
Migrating to v5: getting started - Material UI - MUI
If you are using a React version below 17.0.0, update your packages to at least v4.11.2 for Material UI and v17.0.0 for React....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found