"Simbolo" non è definito in IE dopo aver utilizzato babel

Ho reactjsun'app scritta utilizzando gli standard ES6 e la utilizzo webpackper crearla. Il webpackcarica il filejs moduli utilizzando babel-loader. Per essere precisi, utilizzo le seguenti versioni dei pacchetti: ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6

Tuttavia, dopo averlo creato, IE 10 restituisce il seguente errore 'Symbol' is undefined. Non dovrebbe babelessere definito il Symbol? C'è una configurazione specifica per webpacko babeldevo impostare per farlo funzionare? Uso la {stage: 0}configurazione nel mio file .babelrc.

Qualsiasi aiuto sarebbe apprezzato, grazie!

Puoi richiedere il polyfill nel punto di ingresso del codice in modo che venga raggruppato con il resto di JavaScript.

Un'opzione è usare:

require('babel-polyfill');

O:

import 'babel-polyfill';

Tutto ciò è spiegato nella documentazione .

Ok, alla fine ho scoperto che babelda solo non fa il polyfill. Lo script incluso ha <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>risolto questo problema per me.

Questa soluzione funzionerà sicuramente, ha funzionato per me quando ho riscontrato l'errore: "Simbolo" non è definito in IE. Funzionava in precedenza in Chrome e Firefox, ma IE generava questo errore. Mi ci sono volute alcune ore per trovare questa soluzione. Sto usando l'ultima React in questo momento. React "react": "^ 16.5.0" su 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';

Il problema dovrebbe essere risolto

OK, ho avuto lo stesso problema, ma nel mio caso era abbastanza diverso, quindi in pratica è necessario includere lo script nel file indice come di seguito:

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

Ma nel mio caso, l'ho già incluso, dopo alcune indagini ho scoperto che il mio proxy ha bloccato lo script ...

Quindi assicurati di includerlo in index.html e assicurati anche di avere accesso allo script da dove ti serve per evitare che si verifichi l'errore ... il modo migliore è sufficiente copiare e incollare l'URL nel browser ...

Ma ora che arriviamo a questo punto, non si tratta di Symbol in sé, cos'è Symbol che non può essere riconosciuto in IE?

La funzione Symbol () restituisce un valore di tipo symbol, ha proprietà statiche che espongono diversi membri di oggetti incorporati, ha metodi statici che espongono il registro dei simboli globale e assomiglia a una classe di oggetti incorporata ma è incompleta come costruttore perché non supporta la sintassi "new Symbol ()".

Ogni valore di simbolo restituito da Symbol () è unico. Un valore di simbolo può essere utilizzato come identificatore per le proprietà degli oggetti; questo è l'unico scopo del tipo di dati. Alcune ulteriori spiegazioni sullo scopo e l'uso possono essere trovate nella voce del glossario per Symbol.

Il simbolo del tipo di dati è un tipo di dati primitivo.

nella documentazione su Runtime

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

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

modifica: meglio ancora su heroku in modalità prod usa --save invece di --save-dev

Se ricevi questo errore in un'app Angular, devi annullare il commento delle seguenti righe in 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';