web-dev-qa-db-ja.com

babelを使用した後、IEで 'Symbol'が定義されていません

ES6標準を使用して書かれたreactjsアプリがあり、webpackを使用してビルドします。 webpackは、babel-loaderを使用してjsモジュールをロードします。具体的には、次のバージョンのパッケージを使用します：├── [email protected] ├── [email protected] ├── [email protected] └── [email protected]

ただし、ビルド後、IE 10は次のエラー'Symbol' is undefinedを返します。 babelはSymbolを定義するはずではありませんか？ webpackまたはbabelに特定の構成はありますか？動作させるために設定する必要がありますか？ {stage: 0}で.babelrc構成を使用します。

どんな助けでも感謝します、ありがとう！

reactjswebpackbabeljs
78
Jurom

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

63
Jurom

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

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

require('babel-polyfill');

または：

import 'babel-polyfill';

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

89
Łukasz

この解決策は確実に機能しますが、エラーが発生したときに機能しました： 'Symbol' is undefined in IE。 ChromeおよびFirefoxで以前に機能していましたが、IEがこのエラーをスローしていました。この解決策を見つけるのに数時間かかりました。この時点で最新のReactを使用していますが、Windowsマシンでは「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';

問題は解決されるはずです

4
Kiran Chaudhari

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

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

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

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

4
Jacek Pietal

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

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

しかし、私の場合、私はすでにそれを含めました、いくつかの調査の後、私のプロキシがスクリプトをブロックしたことがわかりました...

確認 index.htmlに含めてください確認エラーの発生を避けるために必要な場所からスクリプトにアクセスできるようにする...最善の方法ブラウザにURLをコピーして貼り付けてください...

しかし、ここで私たちがここに到達するのは、シンボル自体についてではなく、IEで認識できないシンボルとは何ですか？

Symbol（）関数は、シンボル型の値を返し、組み込みオブジェクトのいくつかのメンバーを公開する静的プロパティを持ち、グローバルシンボルレジストリを公開する静的メソッドを持ち、組み込みオブジェクトクラスに似ていますが、コンストラクタとして不完全です。 「new Symbol（）」という構文はサポートしていません。

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

データ型記号はプリミティブデータ型です。

4
Alireza