「シンボル」は、babelを使用した後のIEでは未定義です


87

reactjsES6標準を使用webpackして作成されたアプリがあり、それを作成するために使用しています。webpackロードjsモジュールを使用してbabel-loader。具体的には、次のバージョンのパッケージを使用します。 ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6

ただし、ビルド後、IE10では次のエラーが発生します'Symbol' is undefinedbabelを定義することになっているべきではありませんSymbolか?それを機能させるために特定の構成がありますか、webpackまたはbabel設定する必要がありますか?で{stage: 0}構成を使用します.babelrc

どんな助けでもいただければ幸いです、ありがとう!


1
スタックトレースも追加できますか?

回答:


94

コードへのエントリポイントにポリフィルを要求して、JavaScriptの残りの部分とバンドルされるようにすることができます。

1つのオプションは、次を使用することです。

require('babel-polyfill');

または:

import 'babel-polyfill';

そのすべてがドキュメントで説明されています


2
私はこのバグと何時間も戦っていました!ありがとう
P.Brian.Mackey

何らかの理由で、これはIE10、IE11では機能しないため、Juromが述べたように、IE用の個別のスクリプトとして含めています。とにかく、おそらくwebpackのメインバンドルから分割します。
svnm 2016年

1
こんにちは@Juromと@ Lukasz、SymbolとSymbol.Iteratorのようなその機能がIEで定義されていないのと同じ問題に直面しています。このBabel Polyfillを使用すると、ページが読み込まれませんが、IEがクラッシュしてエラーが発生します。リロードします。
Rahul 2016

1
babel-polyfill私のためにこの問題を修正しました。ありがとうございました!
daveaspinall 2017年

68

わかりました、私は最終的にそれbabelだけではポリフィルがないことを知りました。スクリプトを含めることで、<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>この問題は解決しました。


4
<!-[if IE]> script(type = 'text / javascript')のように、このスクリプトをHTMLにのみ含めることができるメソッドはありますか。require( 'babel-core / browser-polyfill.js')<![endif]->
PinkyJie 2015

IE11でも同じ問題が発生しましたが、これで修正されました。ありがとう!
Waterskier19 2015

@Jurom、このファイルをHTMLに追加すると、IEがクラッシュします:-(。助けてください
Rahul

@RahulどのバージョンのIEですか?クラッシュとはどういう意味ですか?エラーログを提供できますか?
ジュロム2016

IEエッジ。InternetExplorerが機能していないことを示しています。また、ログを生成できません。
Rahul 2016

8

このソリューションは確実に機能します。エラーが発生したときに機能しました。「シンボル」はIEで定義されていません。以前はChromeとFirefoxで機能していましたが、IEがこのエラーをスローしていました。この解決策を見つけるのに数時間かかりました。現在、最新のReactを使用しています。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
index.jsにBabelポリフィルをインポートする場合は、開発依存関係ではなく、通常の依存関係としてインストールする必要があります
Patrick Hund 2018年

ありがとうございました!これは、ie11をBabelとWebpackが連携してコードをコンパイルする現在の方法で機能させる唯一の方法のようです。Babelがes6Symbolsを使用してes5モジュールを最初に構築する理由は謎です。古いブラウザとは明らかに互換性がなく、古いブラウザとの互換性がBabelが存在する理由です。
d 1319年

5

OK、同じ問題がありましたが、私の場合はまったく異なっていたので、基本的には次のようにインデックスファイルにスクリプトを含める必要があります。

<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型の値を返し、組み込みオブジェクトのいくつかのメンバーを公開する静的プロパティを持ち、グローバルシンボルレジストリを公開する静的メソッドを持ち、組み込みオブジェクトクラスに似ていますが、コンストラクターとしては不完全です。構文「newSymbol()」はサポートしていません。

Symbol()から返されるすべてのシンボル値は一意です。シンボル値は、オブジェクトプロパティの識別子として使用できます。これがデータ型の唯一の目的です。目的と使用法に関する詳細な説明は、Symbolの用語集のエントリにあります。

データ型シンボルはプリミティブデータ型です。


1
これは私にとってもそれを修正しました。私はBabelオンラインコンパイラを使用し、このスクリプトをHTMLに含めました。
ViktorMS

1
この一行がうまくいくなんて信じられない!何日も反応+マテリアルUIのポリフィルを追跡し、これによりすべてが1行で修正されました。
jpro

4

ランタイムに関するドキュメント

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

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

編集:prodモードのherokuでは、-save-devの代わりに--saveを使用してください。


このモジュールは現在呼び出されています@babel/plugin-transform-runtime
Kevin Reilly
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.