“符号”在 IE 中使用 babel 后未定义

我有一个使用 ES6标准编写的 reactjs应用程序，我使用 webpack来构建它。webpack使用 babel-loader加载 js模块。具体来说，我使用以下版本的软件包: @ 5.8.34 @ 5.8.34 5.4.0 受害者ーー webpack@1.12.6

但是，在构建它之后，IE10给出了如下错误 'Symbol' is undefined。难道 babel不应该定义 Symbol吗？是否有任何具体的配置为 webpack或 babel我需要设置，以使其工作？我在我的 .babelrc中使用 {stage: 0}配置。

如果你能帮忙我会很感激的, 谢谢！

70740 次浏览
小开
最佳答案

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.

小开

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');


import 'babel-polyfill';

All of that is explained in the documentation.

小开

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

小开

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.

小开

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

小开

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';

提交答案