web-dev-qa-db-fra.com

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

J'ai une application reactjs écrite à l'aide des normes ES6 et j'utilise webpack pour la construire. La webpack charge les modules js à l'aide de babel-loader. Pour être précis, j'utilise les versions suivantes des packages: ├── [email protected] ├── [email protected] ├── [email protected] └── [email protected]

Cependant, après l'avoir construit, le IE 10 génère l'erreur suivante 'Symbol' is undefined. La babel ne devrait-elle pas être supposée définir la Symbol? Existe-t-il une configuration spécifique pour webpack ou babel que je dois définir afin de le faire fonctionner? J'utilise la configuration {stage: 0} dans mon .babelrc.

Toute aide serait appréciée, merci!

reactjswebpackbabeljs
78
Jurom

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

63
Jurom

Vous pouvez avoir besoin de polyfill dans le point d’entrée de votre code pour le regrouper avec le reste de JavaScript.

Une option consiste à utiliser:

require('babel-polyfill');

Ou:

import 'babel-polyfill';

Tout cela est expliqué dans la documentation .

89
Łukasz

Cette solution fonctionnera à coup sûr, cela a fonctionné pour moi lorsque j'ai rencontré l'erreur: "Le 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 la dernière React pour le moment, réagit "réagit": "^ 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

4
Kiran Chaudhari

dans la documentation sur le Runtime

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

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

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

4
Jacek Pietal

OK, J'avais le même problème, mais dans mon cas, c'était très différent, donc vous devez inclure un 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’avais déjà indiqué qu’après quelques enquêtes, j’avais découvert que mon proxy bloquait le script ...

Donc assurez-vous vous l'incluez dans index.html et aussi assurez-vous que vous avez accès au script de l'endroit où vous en avez besoin pour éviter l'erreur de se produire ... meilleur moyen il suffit de copier et coller l'URL dans le navigateur ...

Mais maintenant que nous arrivons à ce point, il ne parle pas de symbole lui-même, quel symbole ne peut pas être reconnu dans IE?

La fonction Symbol () renvoie une valeur de type symbol, possède des propriétés statiques qui exposent plusieurs membres d'objets intégrés, possède des méthodes statiques exposant 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 supporte pas la syntaxe "new Symbol ()".

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

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

4
Alireza