'Символ' не определен в IE после использования babel

У меня есть reactjsприложение, написанное с использованием стандартов ES6, и я использую его webpackдля его создания. В webpackзагружает jsмодули , использующие babel-loader. Если быть точным, я использую следующие версии пакетов: ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6

Однако после сборки IE 10 выдает следующую ошибку 'Symbol' is undefined. Разве не babelследует определять Symbol? Есть ли какая-то конкретная конфигурация webpackили babelмне нужно ее настроить, чтобы она работала? Я использую {stage: 0}конфигурацию в своем .babelrc.

Любая помощь будет оценена, спасибо!

Вы можете потребовать polyfill в точке входа в ваш код, чтобы он был связан с остальной частью JavaScript.

Один из вариантов - использовать:

require('babel-polyfill');

Или:

import 'babel-polyfill';

Все это объясняется в документации .

Хорошо, в конце концов я обнаружил, что babelсам по себе полифил не работает. В том числе скрипт <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>решил эту проблему для меня.

Это решение будет работать точно, у меня оно сработало, когда я столкнулся с ошибкой: «Символ» не определен в IE. Раньше это работало в Chrome и Firefox, но IE выдавал эту ошибку. Мне потребовалось несколько часов, чтобы найти это решение. Я использую последнюю версию React, в настоящее время реагирую "реагировать": "^ 16.5.0" на компьютере с 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';

Проблема должна быть решена

Хорошо, у меня была такая же проблема, но в моем случае она была совсем другой, поэтому в основном вам нужно включить скрипт в индексный файл, как показано ниже:

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

Но в моем случае я уже включил это, после некоторых расследований я обнаружил, что мой прокси заблокировал скрипт ...

Поэтому убедитесь, что вы включили его в index.html, а также убедитесь, что у вас есть доступ к сценарию, откуда он вам нужен, чтобы избежать возникновения ошибки ... лучший способ просто скопировать и вставить URL-адрес в браузере ...

Но теперь, когда мы подошли к этому моменту, речь не идет о самом символе, что такое символ, который не может быть распознан в IE?

Функция Symbol () возвращает значение типа symbol, имеет статические свойства, которые раскрывают несколько членов встроенных объектов, имеет статические методы, которые открывают глобальный реестр символов, и напоминает встроенный класс объектов, но является неполным конструктором, поскольку он не поддерживает синтаксис «новый символ ()».

Каждое значение символа, возвращаемое функцией Symbol (), уникально. Значение символа может использоваться как идентификатор свойств объекта; это единственное назначение типа данных. Дополнительное объяснение цели и использования можно найти в глоссарии для Symbol.

Символ типа данных - это примитивный тип данных.

в документации по Runtime

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

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

edit: еще лучше на heroku в режиме prod используйте --save вместо --save-dev

Если вы получаете эту ошибку в приложении Angular, вам необходимо отменить комментирование следующих строк в 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';