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

Answer 3

You need to include babel-polyfills and transpile down to ES5 for IE11 to work.

React 16 depends on the collection types Map and Set. If you support older browsers and devices which may not yet provide these natively (eg IE < 11) or which have non-compliant implementations (eg IE 11), consider including a global polyfill in your bundled application, such as core-js or babel-polyfill.

https://reactjs.org/docs/javascript-environment-requirements.html

You can include a polyfill via webpack like so

entry: {
      app: [
        'babel-polyfill',
        'react-hot-loader/patch',
        'react',
        'react-dom',
        './src/index.web.tsx',
      ]
},

Answer 4

This is IE problem, not react framework.

the problem that "default" is a reserved word on IE

you can rename "default" function to a new name or use javascript function as :

return e["default"]