Create-react-app: IE11 support doesn't work in dev mode, even after adding all polyfills and enabling ie11 support

[ttaranov]

Describe the bug

IE11 support doesn't work even after adding react-app-polyfill, enabling "ie 11" in browserslist in package.js and adding import 'react-app-polyfill/ie11' and import 'react-app-polyfill/stable' into src/index.js

Did you try recovering your dependencies?

yes

Which terms did you search for in User Guide?

followed instructions on
https://create-react-app.dev/docs/supported-browsers-features/
and
https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md

Environment

MacOS
node 11.15.0
npm 6.7.0
latest create-react-app
Virtual Box with Microsoft's test Window10 and IE11 image VM

Steps to reproduce

1. npx create-react-app test
2. cd test
3. npm i react-app-polyfill
4. edit package.json and add "ie 11" into "browserslist->development" section:

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "ie 11",
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

1. edit src/index.js and add 2 lines at the top:

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

1. rm -rf node_modules/.cache
2. npm run start
3. launch IE11 VM and open http://<ip>:3000 in IE11

Expected behavior

test create react page is supposed to show up

Actual behavior

SCRIPT5022: SyntaxError
0.chunk.js (19856,1)

[J-theGit]

@ttaranov Can you please be more specific about the error in IE? when the SyntaxError is thrown you should be able to see exactly what has failed. For Example 'xxx is undefined' or 'cannot read xxx of undefined' etc. This will help everyone to understand exactly what you're missing from the polyfills.

I had the same issue in dev and prod with TextEncoder.
I've resolved this issue by manually installing the TextEncoder polyfill (without ejecting):

npm i fast-text-encoding

// polyfills for IE
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'fast-text-encoding/text';

However we wouldn't know what exactly is missing in your case. You will need to be more specific about the error

[heyimalex]

I'm able to reproduce. It looks like the syntax errors are from arrow functions, which ie11 doesn't support. Babel's preset-env and that browserslist configuration _should_ handle transforming arrow functions to regular functions, but that apparently isn't working right.

IE11 has sourcemap support, so this is from actually checking the network tab for the location of the syntax error.

[llllanlanlan]

IE11浏览器控制台报错：

项目中依赖包全部都引入了：
import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";
import 'fast-text-encoding/text';

[eyerean]

I confirm the bug, just a small note that version [email protected] still works, so for a quick fix you can revert back (and delete node_modules/.cache and the browsers' cache).

[Tibfib]

FYI, I think this is a duplicate of https://github.com/facebook/create-react-app/issues/8084. That issue thread contains a workaround. This one should probably be closed.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[fgeorgsson]

Just ran into this issue as well. Even 3.2.0 does not work for me. Have added polyfill, have added ie11 to browserlist in package.json. Syntax error is thrown at first fat arrow function.

[alfechner]

Same problem here, related to #8546?

[lisdey]

Same problem, any updates about this? Thanks

[Ciaran0]

Same here with [email protected]

The production build works but the dev build is not.

[jbberinger]

Running into the same issue. Prod is fine but dev is completely broken.

[HiramYong]

seam issue, 3.2.0 doesnt work for me, Could someone help me?

[SteenMolberg]

Same here. Tried 3.2.0 as suggested but no luck.

[TENsaga]

Same issue, react-scripts-3.3.1, dev build doesn't load production build does.

[SteenMolberg]

After trying a lot of things I go back to 3.4,1 again and cleared my node_modules and reinstalled. Finally got it working in dev with workaround from @J-theGit

npm i fast-text-encoding

// polyfills for IE
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'fast-text-encoding/text';

"react-app-polyfill" version installed is 1.0.5 and the fast-text-encoding is 1.0.1

[jbberinger]

After trying a lot of things I go back to 3.4,1 again and cleared my node_modules and reinstalled. Finally got it working in dev with workaround from @J-theGit

"react-app-polyfill" version installed is 1.0.5 and the fast-text-encoding is 1.0.1

Can you outline the workaround?

[haagOS]

I have a working solution (development) with react-scripts v. 3.4.1.

this my package.json:

...
"dependencies": {
    "@types/node": "^12.12.34",
    "@types/react": "^16.9.31",
    "@types/react-dom": "^16.9.6",
    "react": "^16.13.1",
    "react-app-polyfill": "^1.0.6",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "typescript": "^3.7.5"
  },
...,
"browserslist": [
    ">0.2%",
    "not dead",
    "ie 11",
    "not op_mini all"
  ]

this is my index.tsx (note that the polyfills are at the very beginning):

import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";

import React from "react";
import ReactDOM from "react-dom";
...

[ArturBaybulatov]

Clearing the cache and then starting the app worked for me:

rm -rf node_modules/.cache/
npm start

[ChiaJune]

Clearing the cache and then starting the app worked for me:

rm -rf node_modules/.cache/
npm start

still

[simonprice33]

I am having a similar issue but with bundle.js and arrow functions in IE11. I have asked the question here https://stackoverflow.com/questions/62130921/react-app-bable-polyfill-not-working-correctly-ie11 too to see if anyone has a resolution to this.

[simonprice33]

When I had this issue; there was an external library that needed to be transpiled.

I worked it out by transpiling that specific package that was throwing the issue (when I clicked the SCRIPT error)

Though this was for gatsby (so transpile plugin may differ):

But I needed the following in plugins:

{
  "resolve": "gatsby-plugin-compile-es6-packages",
  "options": {
  "modules": ["@company-custom-package"],
  },
},

Hope maybe someone can get a little bit closer to resolving their issues.

I have IE11 issues even after creating a new project so I dont think its down to an external library in my case

[paulrrdiaz]

After adding react-app-polyfill in your index.js, it will work for PROD env but you need to update your browserslist inside package.json for DEV env

index.js

import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

import React from 'react';
import ReactDOM from 'react-dom';
.
.

package.json

.
.
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version",
    "not dead" // new line
  ]
},
.
.

[nightspirit]

From https://stackoverflow.com/questions/62130921/react-app-bable-polyfill-not-working-correctly-ie11 I got the solution to fix my problem.

react-scripts: 3.4.3
react-app-polyfill: 1.0.6

Attach

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

to the first line of src/index.js file

package.json

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "not ie < 11",
      "ie 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  },

Once I added ie 11 to browserslist everything just work again.

[Emiya0306]

My problem resolved.

• Add "ie 11" to browserslist.development.
• And clear the cache rm -rf node_modules/.cache/.

It works! 👍