'Symbol' is undefined in IE after using babel

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 !

Solution 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.

Solution 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.