'Símbolo' é indefinido no IE após usar o babel

Eu tenho um reactjsaplicativo escrito usando os padrões ES6 e uso webpackpara criá-lo. O webpackcarrega os jsmódulos usando babel-loader. Para ser mais específico, uso as seguintes versões de pacotes: ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6

Porém, após compilá-lo, o IE 10 dá o seguinte erro 'Symbol' is undefined. O não babeldeveria definir o Symbol? Existe alguma configuração específica webpackou babelpreciso definir para que funcione? Eu uso {stage: 0}configuração no meu .babelrc.

Qualquer ajuda seria apreciada, obrigado !

Você pode exigir polyfill no ponto de entrada do seu código para que seja agrupado com o resto do JavaScript.

Uma opção é usar:

require('babel-polyfill');

Ou:

import 'babel-polyfill';

Tudo isso é explicado na documentação .

Ok, acabei descobrindo que babelsozinho não faz polyfill. Incluir o script <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>resolveu esse problema para mim.

Esta solução funcionará com certeza, funcionou para mim quando encontrei o erro: 'Symbol' is undefined in IE. Funcionou anteriormente no Chrome e no Firefox, mas o IE estava gerando esse erro. Levei algumas horas para encontrar essa solução. Estou usando o React mais recente neste momento, react "react": "^ 16.5.0" na máquina 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';

O problema deve ser resolvido

OK, eu tive o mesmo problema, mas no meu caso foi bem diferente, então basicamente você precisa incluir o script no arquivo de índice conforme abaixo:

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

Mas no meu caso já incluí isso, depois de algumas investigações descobri que meu proxy bloqueou o script ...

Portanto, certifique-se de incluí-lo no index.html e também certifique-se de ter acesso ao script de onde você precisa para evitar que o erro aconteça ... a melhor maneira é apenas copiar e colar a url no navegador ...

Mas agora que chegamos a este ponto, não se trata do símbolo em si, o que é o símbolo que não pode ser reconhecido no IE?

A função Symbol () retorna um valor do tipo símbolo, tem propriedades estáticas que expõem vários membros de objetos integrados, tem métodos estáticos que expõem o registro de símbolo global e se assemelha a uma classe de objeto integrada, mas é incompleta como construtor porque ele não suporta a sintaxe "new Symbol ()".

Cada valor de símbolo retornado de Symbol () é exclusivo. Um valor de símbolo pode ser usado como um identificador para propriedades de objeto; este é o único propósito do tipo de dados. Alguma explicação adicional sobre o propósito e uso pode ser encontrada na entrada do glossário para Symbol.

O símbolo de tipo de dados é um tipo de dados primitivo.

na documentação sobre Runtime

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

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

editar: melhor ainda no heroku no modo prod, use --save em vez de --save-dev

Se você está recebendo esse erro em um aplicativo Angular, precisa descomentar as seguintes linhas em 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';