„Symbol” jest niezdefiniowany w IE po użyciu babel

Mam reactjsaplikację napisaną przy użyciu standardów ES6 i używam webpackdo jej tworzenia. Te webpackładunki z jsmodułów używających babel-loader. Mówiąc konkretnie, używam następujących wersji pakietów: ├── [email protected] ├── [email protected] ├── [email protected] └── [email protected]

Jednak po zbudowaniu IE 10 wyświetla następujący błąd 'Symbol' is undefined. Czy nie powinien babelpowinien określać Symbol? Czy jest jakaś konkretna konfiguracja webpacklub babelmuszę ją ustawić, aby działała? Używam {stage: 0}konfiguracji w moim .babelrc.

Każda pomoc byłaby doceniona, dziękuję!

Możesz wymagać wypełnienia polyfill w punkcie wejścia do kodu, aby został powiązany z resztą JavaScript.

Jedną z opcji jest użycie:

require('babel-polyfill');

Lub:

import 'babel-polyfill';

Wszystko to jest wyjaśnione w dokumentacji .

Ok, w końcu odkryłem, że babelsam nie ma polyfillu. Dołączenie skryptu <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>rozwiązało ten problem za mnie.

To rozwiązanie na pewno zadziała, zadziałało, gdy napotkałem błąd: „Symbol” nie jest zdefiniowany w IE. Wcześniej działało w Chrome i Firefox, ale IE wyrzucał ten błąd. Znalezienie tego rozwiązania zajęło mi kilka godzin. Używam najnowszego Reacta w tej chwili reaguj "reaguj": "^ 16.5.0" na komputerze z systemem 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';

Problem powinien zostać rozwiązany

OK, miałem ten sam problem, ale w moim przypadku było to zupełnie inne, więc w zasadzie musisz dołączyć skrypt do pliku indeksu, jak poniżej:

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

Ale w moim przypadku już to uwzględniłem, po kilku dochodzeniach okazało się, że mój serwer proxy zablokował skrypt ...

Więc upewnij się , że umieścisz go w index.html, a także upewnij się, że masz dostęp do skryptu z miejsca, w którym go potrzebujesz, aby uniknąć błędu ... najlepiej po prostu skopiuj i wklej adres URL w przeglądarce ...

Ale teraz, kiedy dochodzimy do tego punktu, nie mówimy o samym symbolu, co to jest symbol, którego nie można rozpoznać w IE?

Funkcja Symbol () zwraca wartość typu symbol, ma statyczne właściwości, które uwidaczniają kilka elementów członkowskich wbudowanych obiektów, ma statyczne metody, które ujawniają globalny rejestr symboli i przypomina wbudowaną klasę obiektów, ale jest niekompletna jako konstruktor, ponieważ nie obsługuje składni „nowy Symbol ()”.

Każda wartość symbolu zwrócona przez Symbol () jest unikalna. Wartość symbolu może służyć jako identyfikator właściwości obiektu; jest to jedyny cel tego typu danych. Dalsze wyjaśnienia dotyczące celu i zastosowania można znaleźć w słowniczku dotyczącym symbolu.

Symbol typu danych to prymitywny typ danych.

w dokumentacji o Runtime

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

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

edit: jeszcze lepiej na heroku w trybie prod użyj --save zamiast --save-dev

Jeśli otrzymujesz ten błąd w aplikacji Angular, musisz usunąć komentarz z następujących wierszy w pliku 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';