在使用babel后，IE中出现“Symbol未定义”的错误

Question

我有一个使用ES6标准编写的reactjs应用程序，并使用webpack进行构建。 webpack通过babel-loader加载js模块。具体而言，我使用以下软件包版本： ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6

然而，在构建后，IE 10会给出以下错误：'Symbol' is undefined。babel不应该定义Symbol吗？我需要设置webpack或babel的特定配置才能让它正常工作吗？在.babelrc中，我使用了{stage: 0}配置。

任何帮助将不胜感激， 谢谢!

- Jurom

---

你能加上堆栈轨迹吗？ - user5548116

Answer 1

你可以在代码的入口点要求polyfill，这样它就会随其余JavaScript一起被捆绑起来。一个选项是使用：

require('babel-polyfill');

import 'babel-polyfill';

所有这些都在文档中有解释。

- Łukasz

---

我为这个 bug 战斗了几个小时！谢谢。 - P.Brian.Mackey

由于某些原因，这在IE10和IE11上对我不起作用，所以我将其作为单独的脚本包含在IE中，正如Jurom所提到的那样。无论如何，我可能会在webpack中将其从我的主要捆绑包中拆分出来。 - svnm

你好@Jurom和@Lukasz，我遇到了同样的问题，在IE中Symbol及其函数（如Symbol.Iterator）未定义，使用Babel Polyfill后我的页面无法加载，但会出现IE崩溃并要求重新加载的错误。 - Rahul

babel-polyfill 为我解决了这个问题。谢谢！ - daveaspinall

这对我在Angular 10中起作用，但前提是import "@babel/polyfill";语句必须在import 'zone.js/dist/zone';之前（因为我遇到的Symbol错误来自于zone.js）。 - ewolfman

Answer 2

好的，我最终发现单独使用 babel 不能进行多重填充。包括脚本 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script> 可以解决我的问题。

- Jurom

---

有没有一种方法，我可以像这样在 HTML 中只包含这个脚本：<!--[if IE]>script(type='text/javascript')。 require('babel-core/browser-polyfill.js') <![endif]--> - PinkyJie

我在IE11中也遇到了同样的问题，这个方法解决了我的问题。谢谢！ - Waterskier19

@Jurom，当我在我的HTML中添加这个文件时，我的IE崩溃了 :-(。请帮忙。 - Rahul

@Rahul，你用的是哪个版本的IE浏览器？你所说的“崩溃”是什么意思？能提供错误日志吗？ - Jurom

你也可以通过使用 Node 模块 npm i -S @babel/core @babel/polyfill 并在你的代码中添加 import "@babel/polyfill" 来实现相同的结果。 - sanjsanj

Answer 3

这个解决方案肯定有效，当我遇到“Symbol在IE中未定义”的错误时，它对我起了作用。它之前在Chrome和Firefox上运行正常，但是IE却抛出了这个错误。我花了几个小时才找到这个解决方案。我正在使用最新的React版本react "react": "^16.5.0"，并且是在Windows机器上。

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

问题应该得到解决。

- KiranC

---

如果您在index.js中引入了Babel polyfill，则必须将其安装为常规依赖项，而不是开发依赖项。 - Patrick Hund

谢谢！这似乎是目前Babel和Webpack协同编译代码的唯一途径，才能使ie11正常工作。Babel为什么要在构建es5模块时使用es6符号，其原因是个谜，因为这显然与旧浏览器不兼容，而与旧浏览器的兼容性正是Babel存在的原因。 - d13

Answer 4

好的，我遇到了同样的问题，但在我的情况下略有不同，基本上您需要在索引文件中包含以下脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>

但在我的情况下，我已经包含了它，在一些调查后，我发现我的代理阻止了这个脚本...

所以确保你在index.html中包含它，并且确保你可以从需要它的地方访问该脚本，以避免出现错误...最好的方法只是将url复制并粘贴到浏览器中...

但现在我们来到这个点上，它不是在谈论Symbol本身，那么什么是在IE中无法识别的Symbol？

Symbol()函数返回symbol类型的值，具有公开几个内置对象成员的静态属性，具有公开全局symbol注册表的静态方法，并类似于内置对象类，但作为构造函数不完整，因为它不支持语法“new Symbol()”。

从Symbol()返回的每个符号值都是唯一的。 符号值可用作对象属性的标识符； 这是数据类型的唯一目的。 有关目的和用法的进一步解释，请参见Symbol的词汇表条目。

数据类型符号是原始数据类型。

- Alireza

---

这对我也解决了问题。我使用了Babel在线编译器，并在我的HTML中包含了这个脚本，就这样。 - ViktorMS

我简直不敢相信这一行代码就解决了所有问题！为了让 React + Material UI 兼容性更好，我搜索了好几天的 polyfill，而现在仅仅只需要一行代码就可以搞定。 - jpro

Answer 5

在有关运行时的文档中

// in bash
npm install babel-transform-runtime --save-dev

// in gulpfile
.pipe(babel({
  plugins: ['transform-runtime']
}))

编辑： 在Heroku生产模式下最好使用--save而不是--save-dev

- Jacek Pietal

---

该模块现在被称为 @babel/plugin-transform-runtime。 - Kevin Reilly

Answer 6

如果您在 Angular 应用程序中遇到此错误，则需要取消注释 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';

- David Lindon