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

时间:2015-11-20 14:13:41

标签: reactjs webpack babeljs

我有一个使用ES6标准编写的 spark-submit --class com.ffx.events.logevents.LogParser --master yarn-cluster --jars hdfs://EC22.internal:8020/user/hadoop/dir/src/guava-18.0.jar --driver-class-path logevents-1.0.0-SNAPSHOT-jar-with-dependencies.jar,hdfs:/ /EC22.internal:8020/user/hadoop/dir/src/netty-3.6.2.Final.jar hdfs://e c2ipaddress.internal:8020/user/hadoop/dir/src/logevents-1.0.0-SNAPSHOT-jar-with -dependencies.jar.filepart -input /from-s3-1year/ffx-data/20151001/* -output hdfs://EC22.internal:8020/user/hadoop/dir/output/20151120 应用,我使用15/11/20 14:00:00 INFO Client: Application report for application_1447788091680_0045 (state: ACCEPTED) 15/11/20 14:00:01 INFO Client: Application report for application_1447788091680_0045 (state: ACCEPTED) 15/11/20 14:00:02 INFO Client: Application report for application_1447788091680_0045 (state: ACCEPTED) 15/11/20 14:00:03 INFO Client: Application report for application_1447788091680_0045 (state: ACCEPTED) 15/11/20 14:00:04 INFO Client: Application report for application_1447788091680_0045 (state: FAILED) 15/11/20 14:00:04 INFO Client: client token: N/A diagnostics: Application application_1447788091680_0045 failed 2 times due to AM Container for appattempt_1447788091680_0045_000002 exited with exitCode: -1000 For more detailed output, check application tracking page:http://EC22.internal:20888/proxy/ application_1447788091680_0045/Then, click on links to logs of each attempt. Diagnostics: File does not exist: hdfs://EC22.internal:8020/user/hadoop/.sparkStaging/ application_1447788091680_0045/__spark_conf__7360399142592952913.zip java.io.FileNotFoundException: File does not exist: hdfs://EC22.internal:8020/user/hadoop/.sparkStaging/ application_1447788091680_0045/__spark_conf__7360399142592952913.zip 来构建它。 reactjs使用webpack加载webpack个模块。具体来说,我使用以下版本的软件包: js

但是,在构建它之后,IE 10会出现以下错误babel-loader ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6不应该定义'Symbol' is undefined吗?我需要设置babelSymbol的具体配置才能使其正常工作吗?我在webpack中使用babel配置。

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

6 个答案:

答案 0 :(得分:84)

您可以在代码的入口点要求填充,以便与其余的JavaScript捆绑在一起。

一种选择是使用:

require('babel-polyfill');

或者:

import 'babel-polyfill';

所有这些都在the documentation中解释。

答案 1 :(得分:58)

好的,我最终发现babel单独没有填充物。包括脚本<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>为我解决了这个问题。

答案 2 :(得分:3)

关于运行时

的文档中的

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

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

编辑: 更好的是在prod模式下的heroku使用--save而不是--save-dev

答案 3 :(得分:2)

好的,我遇到了同样的问题,但在我的情况下却完全不同,所以基本上你需要在索引文件中包含脚本,如下所示:

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

但在我的情况下,我已经考虑过,经过一些调查后我发现我的代理人阻止了剧本......

所以确保将其包含在index.html中,并且确保您可以从您需要的位置访问脚本以避免错误发生.. .best方式只需将网址复制并粘贴到浏览器中......

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

  

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

     

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

     

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

答案 4 :(得分:2)

此解决方案肯定会起作用,当我遇到以下错误时,它对我有用: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 :(得分:0)

如果您在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';