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"
    ]
  }

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

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

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

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

[willhoney7]

FYI, I think this is a duplicate of #8084. That issue thread contains a workaround. This one should probably be closed.

[stale]

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.