'Symbol' is undefined in IE after using babel

Question

I have a reactjs app written using ES6 standards, and I use webpack to build it. The webpack loads the js modules using babel-loader. To be specific, I use the following versions of packages: ├── [email protected] ├── [email protected] ├── [email protected] └── [email protected]

However, after building it, the IE 10 gives the following error 'Symbol' is undefined. Shouldn't the babel be supposed to define the Symbol? Is there any specific configuration for webpack or babel I need to set in order to make it work? I use {stage: 0} configuration in my .babelrc.

Any help would be appreciated, Thank you !

Answer 1

You can require polyfill in the entry point to your code so it will get bundled up with the rest of JavaScript.

One option is to use:

require('babel-polyfill');

Or:

import 'babel-polyfill';

All of that is explained in the documentation.

Answer 2

Ok, I eventually found out that babel alone does no polyfill. Including script <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script> solved this issue for me.

Answer 3

This solution will work for sure, it worked for me when I encountered the error: 'Symbol' is undefined in IE . It worked earlier in Chrome and Firefox but IE was throwing this error.It took me few hours to find this solution. I am using the latest React at this time react "react": "^16.5.0" on windows machine.

1. Install babel-polyfill
npm install --save-dev babel-polyfill
In package.json, it should have the following entries

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-react": "^6.24.1"
  }

2. In index.js, add

    import babelPolyfill from 'babel-polyfill';

Problem should get solved