Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

Syntax error crashes app on Internet Explorer 11 in development

Created by: pdhoopr

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?