'Symbol' n'est pas défini dans IE après l'utilisation de babel

J'ai une reactjsapplication écrite en utilisant les normes ES6, et je l'utilise webpackpour la créer. Le webpackcharge les jsmodules en utilisant babel-loader. Pour être précis, j'utilise les versions de packages suivantes: ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6

Cependant, après l'avoir construit, l'IE 10 donne l'erreur suivante 'Symbol' is undefined. Ne devrait-il pas babelêtre censé définir le Symbol? Existe-t-il une configuration spécifique webpackou babeldois-je définir pour la faire fonctionner? J'utilise la {stage: 0}configuration dans mon .babelrc.

Toute aide serait appréciée, merci!

Vous pouvez exiger polyfill dans le point d'entrée de votre code afin qu'il soit intégré au reste de JavaScript.

Une option consiste à utiliser:

require('babel-polyfill');

Ou:

import 'babel-polyfill';

Tout cela est expliqué dans la documentation .

Ok, j'ai finalement découvert que babelseul ne fait pas de polyfill. Y compris le script a <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>résolu ce problème pour moi.

Cette solution fonctionnera à coup sûr, cela a fonctionné pour moi lorsque j'ai rencontré l'erreur: «Symbole» n'est pas défini dans IE. Cela fonctionnait plus tôt dans Chrome et Firefox, mais IE lançait cette erreur. Il m'a fallu quelques heures pour trouver cette solution. J'utilise le dernier React en ce moment react "react": "^ 16.5.0" sur la machine 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';

Le problème devrait être résolu

OK, j'ai eu le même problème, mais dans mon cas, c'était assez différent, donc fondamentalement, vous devez inclure le script dans le fichier d'index comme ci-dessous:

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

Mais dans mon cas, j'ai déjà inclus cela, après quelques investigations, j'ai découvert que mon proxy bloquait le script ...

Donc , assurez- vous d' inclure dans index.html et aussi assurez - vous que vous avez accès au script où vous en avez besoin pour éviter l'erreur qui se passe ... meilleure façon simplement copier et coller l'URL dans le navigateur ...

Mais maintenant que nous arrivons à ce point, il ne s'agit pas de Symbol lui-même, quel est le symbole qui ne peut pas être reconnu dans IE?

La fonction Symbol () renvoie une valeur de type symbol, a des propriétés statiques qui exposent plusieurs membres d'objets intégrés, a des méthodes statiques qui exposent le registre de symboles global et ressemble à une classe d'objets intégrée mais est incomplète en tant que constructeur car il ne prend pas en charge la syntaxe "new Symbol ()".

Chaque valeur de symbole renvoyée par Symbol () est unique. Une valeur de symbole peut être utilisée comme identificateur pour les propriétés d'objet; c'est le seul objectif du type de données. Vous trouverez des explications supplémentaires sur l'objectif et l'utilisation dans l'entrée du glossaire pour Symbol.

Le symbole de type de données est un type de données primitif.

dans la documentation sur Runtime

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

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

edit: mieux encore sur heroku en mode prod utilisez --save au lieu de --save-dev

Si vous obtenez cette erreur dans une application angulaire, vous devez annuler le commentaire des lignes suivantes dans 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';