ReactJS - SCRIPT1010: Expected identifier - Production build not running on IE11

Question

I created a new project with create-react-app today. The production build is not running fine on IE11, the console shows following error:

SCRIPT1010: Expected identifier

The line it points to inside my main.js:

{var n=e&&e.__esModule?function(){return e.default}:function(){return e};

The error is after the e.(default) above. My package json is plain:

{
  "name": "sample-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Strange enough, my dev server works perfectly on IE11 so issue is only with production build. It works well on Chrome as well. Is that I need to have polyfills?

Answer 1

Here is how I fixed it. Not to forget Mr React "Dan Abramov" helped me in this.

So the issue is by default the application was being rendered on IE7 that is not on only IE IE11/EDGE that support the transpiled build. So I had to mention the meta information to let browser know that the intended browser is IE11/edge. Add this in the head section of your index.html:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Now as I got, you ay also see some error in console that reads:

SCRIPT5009: 'Set' is undefined

Not to worry, there is a way around that as well: https://reactjs.org/docs/javascript-environment-requirements.html

Here is the issue I discussed with Dan on git: https://github.com/facebook/create-react-app/issues/4255

Answer 2

It seems like the order of polyfills is also a factor. There are several solutions in this issue that could help resolve this. https://github.com/facebook/react/issues/8379