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

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.

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

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

rm -rf node_modules/.cache/
npm start

Same here with react-scripts@3.4.1

The production build works but the dev build is not.

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.

My problem resolved.

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

It works! 👍

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.

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

IE11浏览器控制台报错： 项目中依赖包全部都引入了： import “react-app-polyfill/ie11”; import “react-app-polyfill/stable”; import ‘fast-text-encoding/text’;

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.

@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

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.

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";
...

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.