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


87

我有一个reactjs使用ES6标准编写的应用程序,并且webpack用于构建它。使用webpack加载js模块babel-loader。具体来说,我使用以下版本的软件包: ├── 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我需要进行设置才能使其正常工作?我在中使用{stage: 0}配置.babelrc

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


1
您也可以添加stacktrace吗?

Answers:


94

您可以在代码的入口点中要求使用polyfill,这样它将与其他JavaScript捆绑在一起。

一种选择是使用:

require('babel-polyfill');

要么:

import 'babel-polyfill';

所有这些都在文档中进行了说明


2
我花了几个小时来解决这个错误!谢谢
P.Brian.Mackey '16

由于某种原因,这在IE10,IE11中对我不起作用,因此我只是将它作为Jurom提到的IE单独脚本包含在内。无论如何,我可能都会将其与webpack中的主捆绑包分开。
svnm

1
您好@Jurom和@ Lukasz,我正面临着相同的问题,即IE中未定义Symbol及其功能(如Symbol.Iterator),通过使用此Babel Polyfill,我的页面无法加载,但是出现错误,即IE崩溃并询问重新加载。
拉胡尔

1
babel-polyfill为我解决了此问题。谢谢!
daveaspinall

68

好的,我最终发现babel仅此一项并不会实现polyfill。包括脚本<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>为我解决了这个问题。


4
有没有一种方法只能以HTML形式显示此脚本,例如:<!-[如果IE]> script(type ='text / javascript')。require('babel-core / browser-polyfill.js')<![endif]->
PinkyJie 2015年

我在IE11中有同样的问题,这也为我解决了。谢谢!
Waterskier19

@Jurom,当我将此文件添加到我的html中时,IE崩溃:-(.。请帮助
Rahul

@Rahul是什么版本的IE?崩溃是什么意思?您可以提供错误日志吗?
Jurom

IE Edge。它显示Internet Explorer无法正常工作。而且我无法生成任何日志。
Rahul

8

此解决方案肯定会起作用,当我遇到以下错误时,它对我有用:IE中未定义'Symbol'。它可以在Chrome和Firefox上运行的较早,但IE抛出此错误。我花了几个小时才找到此解决方案。我目前在Windows机器上使用最新的React响应“ react”:“ ^ 16.5.0”。

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

问题应该得到解决


5
如果将Babel polyfill导入index.js,则必须将其安装为常规依赖项,而不是开发依赖项
Patrick Hund

谢谢!这似乎是使ie11与Babel和Webpack一起编译代码的当前方法一起工作的唯一方法。为什么Babel首先使用es6 Symbols来构建es5模块是一个谜,因为它显然与旧版浏览器不兼容,并且与旧版浏览器的兼容性是Babel存在的原因。
d13

5

好的,我遇到了同样的问题,但就我而言,情况却大不相同,因此基本上,您需要在索引文件中包含脚本,如下所示:

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

但是以我为例,经过一些调查,我已经发现我的代理人阻止了该脚本...

因此,请确保将其包含在index.html中,并确保可以从需要的位置访问脚本,以避免发生错误……最好的方法是将网址复制并粘贴到浏览器中...

但是现在我们到了这一点,它不是在谈论符号本身,什么是在IE中无法识别的符号?

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

从Symbol()返回的每个符号值都是唯一的。符号值可以用作对象属性的标识符。这是数据类型的唯一目的。有关目的和用法的进一步说明可以在Symbol的词汇表条目中找到。

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


1
这也为我解决了。我使用了Babel在线编译器,并将此脚本包含在HTML中,瞧。
ViktorMS

1
我简直不敢相信这一行!追逐polyfill以进行反应+材质ui数天,并将其全部固定在一条线上。
jpro

4

有关运行时的文档中

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

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

编辑:更好,但在prooku模式下的heroku上使用--save而不是--save-dev


现在将该模块称为@babel/plugin-transform-runtime
Kevin Reilly,
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.