IE11 support doesn't work in dev mode, even after adding all polyfills and enabling ie11 support #8197

ttaranov · 2019-12-17T14:50:50Z

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

npx create-react-app test
cd test
npm i react-app-polyfill
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"
    ]
  }

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

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

rm -rf node_modules/.cache
npm run start
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)

The text was updated successfully, but these errors were encountered:

J-theGit · 2019-12-17T16:54:05Z

@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 · 2019-12-17T20:46:49Z

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.

ghost · 2019-12-18T09:01:53Z

IE11浏览器控制台报错：

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

eyerean · 2019-12-18T10:27:51Z

I confirm the bug, just a small note that version react-scripts@3.2.0 still works, so for a quick fix you can revert back (and delete node_modules/.cache and the browsers' cache).

stale · 2020-02-06T22:29:38Z

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 · 2020-03-11T09:07:39Z

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 · 2020-03-12T10:39:08Z

Same problem here, related to #8546?

lisdey · 2020-03-16T16:00:59Z

Same problem, any updates about this? Thanks

Ciaran0 · 2020-03-24T17:58:06Z

Same here with react-scripts@3.4.1

The production build works but the dev build is not.

jbberinger · 2020-03-25T05:53:21Z

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

HiramYong · 2020-03-27T07:51:34Z

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

SteenMolberg · 2020-03-30T17:10:33Z

Same here. Tried 3.2.0 as suggested but no luck.

TENsaga · 2020-03-30T23:44:04Z

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

SteenMolberg · 2020-03-31T07:12:04Z

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 · 2020-03-31T07:21:36Z

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 · 2020-04-02T12:28:32Z

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 · 2020-04-26T09:54:21Z

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

rm -rf node_modules/.cache/
npm start

ChiaJune · 2020-05-21T08:43:58Z

Clearing the cache and then starting the app worked for me:
rm -rf node_modules/.cache/
npm start

still

simonprice33 · 2020-06-01T11:18:56Z

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 · 2020-06-02T05:44:09Z

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 · 2020-06-23T15:48:52Z

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
  ]
},
.
.

Looking at Rollbar errors for the latest front-end version made me realize that there were arrow functions in our JS bundles. Upon further inspection, I realized our `browserslist` specifies `not ie <= 11`, yet our `index.js` imports both `react-app-polyfill/ie11` and `babel-polyfill`. These contradictory lines were actually all introduced in the same PR, #99, which is very odd. I think the reason we might not have seen this strange behavior when writing that PR is because apparently [changing `browserslist` requires deleting `node_modules/.cache`][1]. So it's possible that during development, we never truly saw the results of our actions! (Needless to say, I spent a lot of time in confusion after making this PR's simple code change, until I discovered the root cause.) This means that even Netlify won't reflect changes to `browserslist` by default (it caches all of `node_modules` between builds), so I've modified its configuration to clear `node_modules/.cache` before building the site too. [1]: facebook/create-react-app#8197 (comment)

nightspirit · 2020-09-17T19:33:47Z

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 · 2020-10-22T07:35:16Z

My problem resolved.

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

It works! 👍

Lija-Jose · 2021-01-11T21:35:13Z

Deprecated in package.json file, ran npm install, for React-scripts to "3.4.3" from "4.0.1" on which version the above issue was occurring. Along with polyfill/ie11 and polyfill/stable, .cache folder deletion and browserlists.development changes. Site showed up on IE.

InSuperposition · 2021-03-24T02:33:26Z

IE 10/11 was failing on my project because FAST_REFRESH=true in .env, setting this to false fixed the issue. Setting DISABLE_NEW_JSX_TRANSFORM did not seem to have an affect, polyfills worked in both cases.

ttaranov added issue: bug report needs triage labels Dec 17, 2019

heyimalex removed the needs triage label Dec 18, 2019

This was referenced Dec 22, 2019

ie11 WebSocket SyntaxError create-react-app 3.3.0 #8216

Closed

Throwing SyntaxError by using react-app-polyfill #8146

Closed

This comment has been minimized.

Sign in to view

NMinhNguyen mentioned this issue Feb 5, 2020

Unable to get property 'root' of undefined or null reference mui/material-ui#17789

Closed

2 tasks

stale bot added the stale label Feb 6, 2020

ianschmitz added issue: bug and removed issue: bug report stale labels Feb 6, 2020

ianschmitz added this to the 3.3.2 milestone Feb 6, 2020

iansu modified the milestones: 3.3.2, 3.4.1 Feb 14, 2020

mfreville mentioned this issue Feb 19, 2020

IE 11 compatibilty issue - No rendering app Silind-Software/direflow#76

Closed

iansu modified the milestones: 3.4.1, 3.4.2 Mar 20, 2020

iansu mentioned this issue Apr 2, 2020

Meeting - 4/1/2020 iansu/create-react-app-meta#30

Closed

23 tasks

nicolechung mentioned this issue Apr 9, 2020

Yaml fix for publishing to private registry EverlongProject/create-react-app#19

Merged

ianschmitz modified the milestones: 3.5, 4.0 May 3, 2020

iansu removed this from the 4.0 milestone Jul 22, 2020

toolness mentioned this issue Jul 24, 2020

Actually support IE 11 and non-ES6 browsers JustFixNYC/who-owns-what#335

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

IE11 support doesn't work in dev mode, even after adding all polyfills and enabling ie11 support #8197

IE11 support doesn't work in dev mode, even after adding all polyfills and enabling ie11 support #8197

ttaranov commented Dec 17, 2019 •

edited

Loading

J-theGit commented Dec 17, 2019 •

edited

Loading

heyimalex commented Dec 17, 2019 •

edited

Loading

ghost commented Dec 18, 2019

eyerean commented Dec 18, 2019

This comment has been minimized.

stale bot commented Feb 6, 2020

fgeorgsson commented Mar 11, 2020

alfechner commented Mar 12, 2020

lisdey commented Mar 16, 2020

Ciaran0 commented Mar 24, 2020

jbberinger commented Mar 25, 2020

HiramYong commented Mar 27, 2020

SteenMolberg commented Mar 30, 2020

TENsaga commented Mar 30, 2020

SteenMolberg commented Mar 31, 2020 •

edited

Loading

jbberinger commented Mar 31, 2020

haagOS commented Apr 2, 2020

ArturBaybulatov commented Apr 26, 2020 •

edited

Loading

ChiaJune commented May 21, 2020

simonprice33 commented Jun 1, 2020

simonprice33 commented Jun 2, 2020

paulrrdiaz commented Jun 23, 2020

nightspirit commented Sep 17, 2020

Emiya0306 commented Oct 22, 2020 •

edited

Loading

Lija-Jose commented Jan 11, 2021

InSuperposition commented Mar 24, 2021

IE11 support doesn't work in dev mode, even after adding all polyfills and enabling ie11 support #8197

IE11 support doesn't work in dev mode, even after adding all polyfills and enabling ie11 support #8197

Comments

ttaranov commented Dec 17, 2019 • edited Loading

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

J-theGit commented Dec 17, 2019 • edited Loading

heyimalex commented Dec 17, 2019 • edited Loading

ghost commented Dec 18, 2019

eyerean commented Dec 18, 2019

This comment has been minimized.

stale bot commented Feb 6, 2020

fgeorgsson commented Mar 11, 2020

alfechner commented Mar 12, 2020

lisdey commented Mar 16, 2020

Ciaran0 commented Mar 24, 2020

jbberinger commented Mar 25, 2020

HiramYong commented Mar 27, 2020

SteenMolberg commented Mar 30, 2020

TENsaga commented Mar 30, 2020

SteenMolberg commented Mar 31, 2020 • edited Loading

jbberinger commented Mar 31, 2020

haagOS commented Apr 2, 2020

ArturBaybulatov commented Apr 26, 2020 • edited Loading

ChiaJune commented May 21, 2020

simonprice33 commented Jun 1, 2020

simonprice33 commented Jun 2, 2020

paulrrdiaz commented Jun 23, 2020

nightspirit commented Sep 17, 2020

Emiya0306 commented Oct 22, 2020 • edited Loading

Lija-Jose commented Jan 11, 2021

InSuperposition commented Mar 24, 2021

ttaranov commented Dec 17, 2019 •

edited

Loading

J-theGit commented Dec 17, 2019 •

edited

Loading

heyimalex commented Dec 17, 2019 •

edited

Loading

SteenMolberg commented Mar 31, 2020 •

edited

Loading

ArturBaybulatov commented Apr 26, 2020 •

edited

Loading

Emiya0306 commented Oct 22, 2020 •

edited

Loading