'Symbol' ist im IE nach Verwendung von babel undefiniert

Ich habe eine reactjsApp, die mit ES6-Standards geschrieben wurde, und ich verwende sie webpack, um sie zu erstellen. Das webpacklädt die jsModule mit babel-loader. Um genau zu sein, verwende ich die folgenden Versionen von Paketen: ├── [email protected] ├── [email protected] ├── [email protected] └── [email protected]

Nach dem Erstellen gibt der IE 10 jedoch den folgenden Fehler aus 'Symbol' is undefined. Sollte das nicht das babeldefinieren sollen Symbol? Gibt es eine bestimmte Konfiguration für webpackoder muss babelich diese festlegen, damit sie funktioniert? Ich benutze die {stage: 0}Konfiguration in meinem .babelrc.

Jede Hilfe wäre dankbar, danke!

Sie können Polyfill im Einstiegspunkt für Ihren Code verlangen, damit dieser mit dem Rest von JavaScript gebündelt wird.

Eine Option ist zu verwenden:

require('babel-polyfill');

Oder:

import 'babel-polyfill';

All dies wird in der Dokumentation erklärt .

Ok, ich habe schließlich herausgefunden, dass babelallein keine Polyfüllung erfolgt. Einschließlich Skript <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>löste dieses Problem für mich.

Diese Lösung wird sicher funktionieren, sie hat bei mir funktioniert, als ich auf den Fehler gestoßen bin: 'Symbol' ist im IE undefiniert. In Chrome und Firefox hat es früher funktioniert, aber der IE hat diesen Fehler ausgelöst. Ich habe einige Stunden gebraucht, um diese Lösung zu finden. Ich verwende die neueste React zu diesem Zeitpunkt reagieren "reagieren": "^ 16.5.0" auf Windows-Maschine.

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';

Problem sollte gelöst werden

OK, ich hatte das gleiche Problem, aber in meinem Fall war das ganz anders. Im Grunde müssen Sie das Skript wie folgt in die Indexdatei aufnehmen:

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

Aber in meinem Fall habe ich bereits aufgenommen, dass ich nach einigen Untersuchungen herausgefunden habe, dass mein Proxy das Skript blockiert hat ...

So stellen Sie sicher , Sie sind es in index.html und auch sicherstellen, dass Sie Zugriff auf das Skript aus , wo Sie es brauchen um den Fehler zu vermeiden , geschieht ... beste Weg , einfach kopieren und die URL in den Browser einfügen ...

Aber jetzt, wo wir zu diesem Punkt kommen, geht es nicht um das Symbol selbst. Was ist das Symbol, das im IE nicht erkannt werden kann?

Die Funktion Symbol () gibt einen Wert vom Typ symbol zurück, verfügt über statische Eigenschaften, die mehrere Elemente integrierter Objekte verfügbar machen, verfügt über statische Methoden, die die globale Symbolregistrierung verfügbar machen, und ähnelt einer integrierten Objektklasse, ist jedoch als Konstruktor unvollständig, da Die Syntax "new Symbol ()" wird nicht unterstützt.

Jeder von Symbol () zurückgegebene Symbolwert ist eindeutig. Ein Symbolwert kann als Bezeichner für Objekteigenschaften verwendet werden. Dies ist der einzige Zweck des Datentyps. Weitere Erläuterungen zu Zweck und Verwendung finden Sie im Glossareintrag für Symbol.

Das Datentypsymbol ist ein primitiver Datentyp.

in der Dokumentation zu Runtime

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

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

edit: noch besser auf heroku im prod mode benutze --save statt --save-dev