Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Syntax error crashes app on Internet Explorer 11 in development #2691

Closed
pdhoopr opened this issue Jun 29, 2017 · 5 comments · Fixed by #2692
Closed

Syntax error crashes app on Internet Explorer 11 in development #2691

pdhoopr opened this issue Jun 29, 2017 · 5 comments · Fixed by #2692
Milestone

Comments

@pdhoopr
Copy link
Contributor

pdhoopr commented Jun 29, 2017

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

Yes

Which terms did you search for in User Guide?

"internet explorer 11", "syntax error"

Environment

  1. node -v: 8.1.2
  2. npm -v: 5.0.3
  3. yarn --version (if you use Yarn): 0.24.5
  4. npm ls react-scripts (if you haven’t ejected): 1.0.9

Then, specify:

  1. Operating system: macOS Sierra 10.12.5
  2. Browser and version (if relevant): Internet Explorer 11 (via VirtualBox)

Steps to Reproduce

  1. npm i -g create-react-app
  2. create-react-app my-app
  3. cd my-app
  4. npm start
  5. Open Internet Explorer 11 and navigate to app URL
  6. Check console and see syntax error has been thrown

Expected Behavior

I expected the app to load successfully and to show the initial Create React App page, like normal.

Actual Behavior

A blank white screen shows instead and a syntax error is thrown in the console.

Reproducible Demo

I don't have an easily reproducible demo, but found that you really just need the basic initial steps from CRA's documentation.

I first encountered this working on an app for my company that's not using CRA, but is using react-dev-utils. When I remove react-dev-utils/webpackHotDevClient from our wepack entry array, the app loads successfully as expected. I primarily use Chrome for development, but just happened to run into this during one of my compatibility check-ins on IE 11.

As far as I can tell, the issue seems to be a result of this set of dependency updates. Specifically, the update of strip-ansi to 4.0.0 seems to also update ansi-regex to 3.0.0 which started exporting an arrow function instead of a regular function in this commit. Since IE 11 doesn't support arrow functions, I imagine this might be the problem, or at least related?

@gaearon
Copy link
Contributor

gaearon commented Jun 29, 2017

This makes total sense, thanks for flagging. Want to send a PR to downgrade strip-ansi?

@gaearon gaearon added this to the 1.0.10 milestone Jun 29, 2017
@pdhoopr
Copy link
Contributor Author

pdhoopr commented Jun 29, 2017

Definitely! I'll try to do that shortly 👍

@gaearon
Copy link
Contributor

gaearon commented Jun 29, 2017

Please verify this release fixes it.
https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.10

@pdhoopr
Copy link
Contributor Author

pdhoopr commented Jun 29, 2017

Yep, that takes care of it. Thank you!

@dep-deprecated
Copy link

To anyone who ends up here still having problems, I found success using babel-engine-plugin to transpile the necessary node_modules for ie11.

@lock lock bot locked and limited conversation to collaborators Jan 13, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants