Create-react-app: Application crashes on IE11 and lower, Syntax error

[Luke93dev]

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Environment

node version: 8.11.1,
npm version: 5.6.0

This problem is specific for IE11 running on Windows 10

Steps to Reproduce

1. npx create-react-app my-app
2. cd my-app
3. npm start
4. Open application in IE11 browser

Expected Behavior

I expected my app to load, like it does in Chrome, Firefox and Safari.

Actual Behavior

Got console error - "Syntax error" after running npm start command. Debugger points to ansi-regex dependecy in node-modules, the problem is ES6 arrow function syntax. Any ideas how can I fix this? I tried using react-app-polyfill package but with no results.

It seems related to this old topic: https://github.com/facebook/create-react-app/issues/2691

ansi-regex in version 3.00 or higher exports arrow functions instead of regular functions and it causes error in IE11. Previously package version was downgraded, but now it seems to be bumped to 3.00 again

[miraage]

Do you have a required polyfill included as the very first line in your src/index.js?

[Luke93dev]

Do you have required polyfill included as the very first line in your src/index.js?

Sure,

[Luke93dev]

I ran - npm run build, and then served built aplication using Express locally - it works perfectly on IE11 :)

So the problem seems to happen only with npm start

[Linkontoask]

You need to configure the webpack. config. js file in vue. Maybe you need to use the npm run eject command to expose the configuration file. These are just some of my suggestions.

[dep]

I'm having the same issue. Any updates are appreciated.

[dep]

To those who end up here, I found success using babel-engine-plugin to transpile the necessary node_modules for ie11.

[akaguny]

To those who end up here, I found success using babel-engine-plugin to transpile the necessary node_modules for ie11.

you dont need transpile node_modules, if import 'react-app-polyfill/ie11'; don`t work on first line your app pls clear cache IE (Ctrl+Shift+Delele)

[gaearon]

It is a known issue that the development version (npm start) is currently broken on IE11. But the production version (npm run build) should work.

[dep]

you dont need transpile node_modules, if import 'react-app-polyfill/ie11'; don`t work on first line your app pls clear cache IE (Ctrl+Shift+Delele)

This is true unless you're using react-dev-utils/webpackHotDevClient which crashes unless you transpile node_modules manually for IE11 (in my experience at least)

[jackblackCH]

Any updates on this? Is it planned to make the development version npm start to work in IE11?
It's not meant to develop ever in IE11, it's obvious that it would be super slow. It's more about being able to smoke test the "create-react-app" in IE11.

After copy/pasting the polyfill lines from the https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill I believe many devs try to npm start the app again and expecting it to work, this is a bit confusing. So maybe an update of the docs that it works, but only via npm run build could be enough.

[StJohn3D]

One of my older apps was still working and it was on react-scripts @ v2.1.5 so I just downgraded my react-scripts to "react-scripts": "2.1.5" until this issue is resolved.
Be warned though, installing that version will get you this message: found 68 vulnerabilities (63 low, 5 high)

[newtonanbarasu]

@StJohn3D thanks it's working fine if I update version to "react-scripts": "2.1.5"

[StJohn3D]

@Luke93dev @jackblackCH @newtonanbarasu and anyone else arriving here, there is a better solution outlined here: https://github.com/facebook/create-react-app/issues/6924#issuecomment-487312199

[alexfromapex]

If you're still stuck, hopefully this helps: https://medium.com/@matwankarmalay/create-react-app-ie11-script1002-syntax-error-how-to-get-rid-of-it-d70000c53ddf