'Symbol' is undefined in IE after using babel - reactjs

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:
├── babel#5.8.34
├── babel-core#5.8.34
├── babel-loader#5.4.0
└── webpack#1.12.6
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

Answer 4

OK, I had the same issue, but in my case that was quite different, so basically you need to include script in the index file as below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
But in my case, I already included that, after some investigations I found out that my proxy blocked the script...
So make sure you include it in index.html and also make sure that you have access to the script from where you need it to avoid the error happening...best way just copy and paste the url in the browser...
But now which we get to this point, it's not talking about Symbol itself, what's Symbol which can not be recognised in IE?
The Symbol() function returns a value of type symbol, has static
properties that expose several members of built-in objects, has static
methods that expose the global symbol registry, and resembles a
built-in object class but is incomplete as a constructor because it
does not support the syntax "new Symbol()".
Every symbol value returned from Symbol() is unique. A symbol value
may be used as an identifier for object properties; this is the data
type's only purpose. Some further explanation about purpose and usage
can be found in the glossary entry for Symbol.
The data type symbol is a primitive data type.

Answer 5

in documentation about Runtime
// in bash
npm install babel-transform-runtime --save-dev
// in gulpfile
.pipe(babel({
plugins: ['transform-runtime']
}))
edit:
better yet on heroku in prod mode use --save instead of --save-dev

Answer 6

If you are getting this error in an Angular app, you need to un-comment the following lines in polyfills.ts -
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';