Apps with react-scripts v4.0.0 do not work in IE11
#9906
Comments
|
If I'm not mistaken, a new project won't work on IE at all in development mode due to the
(see |
|
@Pierre-Do |
|
my workaround:
|
|
I'm also affected by this issue |
|
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 |
|
I think the new jsx transform is causing this, try disabling it either by adding 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 |
|
@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 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 /** @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 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
/** @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')
);
{
"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"
]
}
}
|
|
Try removing You only need |
|
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 |
|
@Dan503 @pluma I tried both, Could you be so kind and create a new Thank you Update: |
|
I also tried many of these solutions. The only one that worked was downgrading |
Not works for me. I solved it by put followed code to the top of the |
|
@gynekolog this seems to not be working for normal javascript cra - have you tried? |
|
@BerndWessels I didn't try it without typescript. But you can :-) |
|
@gynekolog I did, |
|
@gynekolog solutions is working for me (pure JS) Here are my 3 first lines in index.js |
|
We have had some luck by upgrading to react-scripts v4.0.1, however it didn't consistently work across all of our projects. We have no idea why. For the projects it did work in, we were able to remove So if you are still struggling, Try upgrading to v4.0.1. It might work for you. |
|
I have the same issue with a very old version of Chrome. I've updated the browser list config to support it but the only fix has been the |
@Dan503, issue still exists in react-scripts v4.0.1 and excellent fix by @msbarry is still necessary in 4.0.1 |
|
I needed Workbox ^5 so I could customize a service worker using workbox-webpack-plugin, so I needed react-scripts ^4 or else the dependencies always downgraded Workbox to 4. I did get IE11 to work with Workbox 5.1.4 and react-scripts 4.0.1. The solution I found was to follow @msbarry and @Dan503 advice. Here is the top of my index.js file |
|
have absolutely same situation as @BerndWessels |
@msbarry : Thanks. This works for me |
|
Hello, I am reading your comments and I wanted to share with you the solutions I obtained by doing research.
I created my project with create-react-app and installed react-app-polyfill. It works with react-scripts@4.0.1. These are the solutions that give successful results for me; 1. React-scripts version can be downloaded. (Example: react-scripts@3.4.4 successful.) /** @jsxRuntime classic */
import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";3. Add this to the first line of src/index.
import 'react-app-polyfill/ie11';
import 'core-js/stable';
import 'regenerator-runtime/runtime';4. Define .env It was a solution text consisting of the information I obtained from you. Thank you all. Hope it helps those who are in search. |
|
@asezgin58 you shouldn't need to downgrade to react-scripts 3.4.4 and you don't need to disable the new JSX transforms. With React v4.0.1, as long as you have this at the top of your /** @jsxRuntime classic */
import "react-app-polyfill/ie11";
import React from 'react'That solution has worked consistently for us across all our projects. (Note: we are handling the importing of polyfills for non-React library code manually instead of letting Babel import polyfills automatically) |
|
@Dan503 I understand you, but the solution you mentioned for my project did not work. Downgrading was also an option for me. But of course I applied one of the alternative solutions without downgrading the version. If you want to examine my project; https://github.com/asezgin58/recoil-essential-app |
|
@asezgin58 Seems to work ok for me :/ I didn't make any changes, it said in package.json it was installing react-scripts 4.0.1.
|
|
@Dan503 I fixed this error with my last commit. You can see it in src/index file. When I remove the imports from the src/index file, it works incorrectly for me.
|
|
@asezgin58 ok the issue is that you still need core-js to give you some polyfills. So the bare minimum that you need to do in /** @jsxRuntime classic */
import 'react-app-polyfill/ie11'
import 'core-js/stable'
import React from 'react'You don't need Note that you don't need to import the I left off |
|
@Dan503 Anything else you can think of that might cause this problem? Running /** @jsxRuntime classic */
import 'react-app-polyfill/ie11'
import 'core-js/stable'
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);with the generated {
"name": "cra4ie11",
"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-dom": "^17.0.1",
"react-scripts": "4.0.1",
"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": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
|
|
@BerndWessels package.json/browserList should contain "ie 11". Then please install react-app-polyfill. No other problem appears. |
|
@Dan503 You are right. I noticed that the following use is sufficient. But it still doesn't work on my project I told you about. ( The project link I mentioned; https://github.com/asezgin58/recoil-essential-app ) src/index /** @jsxRuntime classic */
import 'react-app-polyfill/ie11';I want to share my new experience on this subject. I want to list the steps I followed. 1. I created a new project with create-react-app and just added "ie 11" into package.json/browserList. Result: The project is now running on ie11 in its default form. 2. But with the codes I added, the need for polyfill arose. Therfore I installed react-app-polyfill and imported it into the src/index file. 3. I deleted the node-modules/.cache folder and restarted the project with "npm start". It still didn't work :( 4. And I applied the solution that @Dan503 mentioned. My project now runs on ie11. :) Note : If we use it by importing core-js/stable file; I observed that the build size increases a lot. I guess /** @jsxRuntime classic */ is more convenient to use. Because it does not have a serious effect on the build size. My new project link : https://github.com/asezgin58/context-essential-app But I still don't understand why the same solution didn't work for the project I'm talking about. Because my new project is no different from its dependency. :( Thanks @Dan503 👍 |
|
@asezgin58 I can't see |
|
@gynekolog Sorry, because I forgot to share the link to my new project. My new project link : https://github.com/asezgin58/context-essential-app |
|
@asezgin58 I'm going to break down each line explaining what the purpose of each line is. The new version of React uses a new method for converting JSX syntax into js that browsers understand. This line tells the compiler to use the old deprecated compilation method instead of the new fancy one. By default, React uses code that isn't natively supported in IE11. This line loads up the bare minimum number of polyfills needed to run a "Hello World" React App in IE11. The reason why this line adds so much JavaScript weight to the page is because it adds basically every single polyfill there is in the core-js library to your JavaScript bundle. This an extremely inefficient method of doing IE11 polyfills. It is much better to load in individual polyfills from the core-js library as you need them. The core-js documentation explains how to do this syntactically. You need to read the errors that you are getting in IE11 to figure out what polyfills you are currently missing from your project that you need. Since we are using the old compilation method, we need to import React the old fashioned way. index.js is the only file that needs to be compiled in the old fashion way though. None of the other files need to import React since they compile using the new method. Note: if you are using TypeScript, the last line needs to look like this instead: import * as React from 'react' |
|
Hi all. A bit late on this issue but I've plucked my hair to find a solution to this issue until I stumbled upon on this issue and several other similar/duplicate ones. Thanks to all of you who provided solution(s) to this issue, and big props to @msbarry ! If I may give a little advise is that, this needs to be relayed to the changelog as a solution to people who work in projects that still support IE11 (such as myself), to make their life easier when upgrading from |
|
Thanks to @pluma, what I found to be the cleanest solution was to extract all the code from This way there is absolutely no need to disable the JSX transformations. Unfortunately, this still won't fix the hot reload, as neither of the solutions above.
import "react-app-polyfill/ie9";
import "react-app-polyfill/stable";
import "./bootstrap";
import React from "react";
import ReactDOM from "react-dom";
import App from "components/App";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
); |
|
@borodean I think you just unlocked the method for enabling tree shaking support! src/index.ts import "react-app-polyfill/ie11";
import "./bootstrap";src/bootstrap.tsx: import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "components/App";
ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
document.getElementById("root")
);That now only loads in I think you can get even more savings by importing ReactDOM like this as well: import { render } from "react-dom";
// ...
render(
// ...
) |
|
I was experiencing the same issue. Even though I'm using The good news: After updating PS: @Dan503 Doesn't that breach the react/react-in-jsx-scope convention? |
That isn't a thing you need to worry about anymore in React v4. https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html |
|
My app works fine in IE11 after upgrading I did not to change anything else mentioned in this thread.e.g. browserslist, polyfills, @jsxRuntime classic |
I can confirm, after upgrading to "browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
], [...]
} |
|
IE 10/11 was failing on my project because
|
|
change "react-scripts": "4.0.3" to "react-scripts": "4.0.0" works for me |
and others
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-polyfillI see it's also not working at all.My
package.jsonlooks like this:The same error appears also when I run
yarn buildand serve frombuild/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
Steps to reproduce
yarn add react-app-polyfillimport 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable';to the top ofindex.tsxyarn startExpected 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.)
The text was updated successfully, but these errors were encountered: