Apps with `react-scripts` v4.0.0 do not work in IE11
See original GitHub issueDescribe 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
- Create new CRA app with typescript template used
yarn add react-app-polyfill
- Add
import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable';
to the top ofindex.tsx
yarn start
- 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.)
Issue Analytics
- State:
- Created 3 years ago
- Reactions:34
- Comments:50
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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 setDISABLE_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.my workaround:
import 'react-app-polyfill/ie11';
// import 'react-app-polyfill/stable';
import 'core-js/stable';
import 'regenerator-runtime/runtime';