'Símbolo' no está definido en IE después de usar babel

87

Tengo una reactjsaplicación escrita con los estándares ES6 y la uso webpackpara crearla. Las webpackcargas de los jsmódulos usando babel-loader. Para ser específico, utilizo las siguientes versiones de paquetes: ├── [email protected] ├── [email protected] ├── [email protected] └── [email protected]

Sin embargo, después de construirlo, el IE 10 da el siguiente error 'Symbol' is undefined. ¿No babeldebería suponerse que define el Symbol? ¿Existe alguna configuración específica webpacko babeldebo establecer para que funcione? Utilizo la {stage: 0}configuración en mi .babelrc.

Cualquier ayuda será apreciada, ¡Gracias!

Jurom
fuente
1
¿Podrías agregar un stacktrace también?

Respuestas:

94

Puede requerir polyfill en el punto de entrada a su código para que se agrupe con el resto de JavaScript.

Una opción es usar:

require('babel-polyfill');

O:

import 'babel-polyfill';

Todo eso se explica en la documentación .

Łukasz
fuente
2
¡Estuve luchando contra este error durante horas! GRACIAS
P.Brian.Mackey
por alguna razón, esto no me funciona en IE10, IE11, así que lo incluyo como un script separado para IE como lo menciona Jurom. Probablemente lo dividiría de mi paquete principal en el paquete web de todos modos.
svnm
1
Hola @Jurom y @ Lukasz, estoy enfrentando el mismo problema que Symbol y sus funciones como Symbol.Iterator no está definido en IE, al usar este Polyfill de Babel, mi página no se carga, pero aparece un error de IE que se bloquea y solicita recargar.
Rahul
1
babel-polyfillsolucionó este problema para mí. ¡Gracias!
daveaspinall
68

Ok, eventualmente descubrí que babelsolo no hace polyfill. Incluir el script <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>resolvió este problema para mí.

Jurom
fuente
4
¿Existe un método que solo pueda incluir este script en HTML como: <! - [if IE]> script (type = 'text / javascript'). require ('babel-core / browser-polyfill.js') <! [endif] ->
PinkyJie
Tuve el mismo problema en IE11 y esto también me lo solucionó. ¡Gracias!
Waterskier
@Jurom, cuando agrego este archivo en mi html, mi IE se bloquea :-(. Por favor, ayuda
Rahul
@Rahul ¿qué versión de IE? ¿A qué te refieres con accidente? ¿Puede proporcionar el registro de errores?
Jurom
IE Edge. Muestra que Internet Explorer no funciona. Y no puedo generar ningún registro.
Rahul
8

Esta solución funcionará con seguridad, funcionó para mí cuando encontré el error: 'Símbolo' no está definido en IE. Funcionó anteriormente en Chrome y Firefox, pero IE arrojaba este error. Me tomó algunas horas encontrar esta solución. Estoy usando el último React en este momento reaccionar "react": "^ 16.5.0" en la máquina de 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';

El problema debería resolverse

Kiran Chaudhari
fuente
5
Si importa el polyfill de Babel en su index.js, debe instalarlo como una dependencia regular, no una dependencia de desarrollo
Patrick Hund
¡Gracias! Esta parece ser la única forma de hacer que ie11 funcione con la forma actual en la que Babel y Webpack están trabajando juntos para compilar código. Por qué Babel está usando los símbolos es6 para construir módulos es5 en primer lugar es un misterio, ya que es claramente incompatible con navegadores más antiguos, y la compatibilidad con navegadores más antiguos es la razón por la que Babel existe.
d13
5

De acuerdo, tuve el mismo problema, pero en mi caso fue bastante diferente, así que básicamente necesitas incluir un script en el archivo de índice como se muestra a continuación:

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

Pero en mi caso ya lo incluí, luego de algunas investigaciones descubrí que mi proxy bloqueaba el script ...

Así que asegúrese de incluirlo en index.html y también asegúrese tener acceso al script desde donde lo necesita para evitar que ocurra el error ... la mejor manera es simplemente copiar y pegar la URL en el navegador ...

Pero ahora que llegamos a este punto, no se trata del símbolo en sí, ¿qué símbolo no se puede reconocer en IE?

La función Symbol () devuelve un valor de tipo símbolo, tiene propiedades estáticas que exponen varios miembros de objetos incorporados, tiene métodos estáticos que exponen el registro de símbolos global y se asemeja a una clase de objeto incorporada, pero está incompleta como constructor porque no admite la sintaxis "new Symbol ()".

Cada valor de símbolo devuelto por Symbol () es único. Se puede utilizar un valor de símbolo como identificador de propiedades de objeto; este es el único propósito del tipo de datos. Puede encontrar más explicaciones sobre el propósito y el uso en la entrada del glosario de Symbol.

El símbolo del tipo de datos es un tipo de datos primitivo.

Alireza
fuente
1
Esto me lo arregló también. Usé el compilador en línea de Babel e incluí este script en mi HTML, listo.
ViktorMS
1
¡No puedo creer que esta línea funcione! persiguiendo polyfills para react + material ui durante días y esto lo arregló todo con una sola línea.
jpro
4

en la documentación sobre Runtime

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

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

editar: mejor aún en heroku en modo prod use --save en lugar de --save-dev

Jacek Pietal
fuente
Este módulo ahora se llama@babel/plugin-transform-runtime
Kevin Reilly
0

Si recibe este error en una aplicación angular, debe eliminar los comentarios de las siguientes líneas en 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';
David Lindon
fuente