Módulos ES6 en el navegador: Error de sintaxis no detectado: Importación de token inesperada

85

Soy nuevo en ES6 (ECMAScript 6) y me gustaría usar su sistema de módulos en el navegador. Leí que ES6 es compatible con Firefox y Chrome, pero obtengo el siguiente error al usarexport

Uncaught SyntaxError: Unexpected token import

Tengo un archivo test.html

<html>
    <script src="test.js"></script>
<body>
</body>
</html>

y un archivo test.js

'use strict';

class Test {

    static hello() {
        console.log("hello world");
    } 
}

export Test;

¿Por qué?

javascript html ecmascript-6 module es6-modules cdarwin
fuente
Los módulos ES6 aún no son compatibles con el navegador. Además, todavía está cargando un script, no un módulo.
Bergi
3
Todavía no entiendo la diferencia entre un script y un módulo
cdarwin
Ver aquí
Bergi
20
La parte importante que he notado es <script type="module"></script>asegurarse de agregar que, de lo contrario, obtendrá ese error. Me golpeaba la cabeza contra la pared continuamente haciendo a <script>import ... </script>sabiendas que ahora se dice que Chrome admite módulos ES6 sin banderas, luego noté que el atributo de tipo era necesario para especificar al navegador que este es un módulo ES6, sin el cual se obtiene exactamente error.
Emmanuel Mahuni
1
Estoy usando Chrome 68, todavía veo este error cuando usamos importar * desde
Integración

Respuestas:

66

Muchos navegadores modernos ahora admiten módulos ES6. Siempre que importe sus scripts (incluido el punto de entrada a su aplicación), su uso <script type="module" src="...">funcionará.

Eche un vistazo a caniuse.com para obtener más detalles: https://caniuse.com/#feat=es6-module

vullnetyy
fuente
53

Puede probar los módulos ES6 en Google Chrome Beta (61) / Chrome Canary.

Implementación de referencia de ToDo MVC por Paul Irish - https://paulirish.github.io/es-modules-todomvc/

Tengo una demostración básica - 

//app.js
import {sum} from './calc.js'

console.log(sum(2,3));

//calc.js
let sum = (a,b) => { return a + b; }

export {sum};

<html> 
    <head>
        <meta charset="utf-8" />
    </head>

    <body>
        <h1>ES6</h1>
        <script src="app.js" type="module"></script>
    </body>

</html>

¡Espero eso ayude!

Roopesh Reddy
fuente
33
Así es ... La parte importante que he notado es <script type="module"></script>asegurarse de agregar que, de lo contrario, obtendrá ese error. Me golpeaba la cabeza contra la pared continuamente haciendo a <script>import ... </script>sabiendas que ahora se dice que Chrome admite módulos ES6 sin banderas, luego noté que el atributo de tipo era necesario para especificar al navegador que este es un módulo ES6.
Emmanuel Mahuni
1
{"message": "Error de sintaxis no detectado: token inesperado {", "nombre de archivo": " stacksnippets.net/js ", "lineno": 24, "colno": 8}
hoogw
4
Obtuve el error anterior al ejecutar el fragmento de código anterior, usar Chrome v67, ¿por qué?
hoogw
@hoogw Stackoverflow agregó que Ejecutar fragmento de código automáticamente. Este código no se puede ejecutar tal cual. ¡Debe copiar el código en index.html y separar los archivos .js como se muestra arriba y probar en el navegador!
Roopesh Reddy
Gracias respuesta útil. Eliminé el corredor de fragmentos para ti. (Como vi, los fragmentos de StackOverflow no pueden tener más de una jsfuente).
Mir-Ismaili
25

Desafortunadamente, los módulos no son compatibles con muchos navegadores en este momento.

Esta característica apenas está comenzando a implementarse en los navegadores de forma nativa en este momento. Está implementado en muchos transpilers, como TypeScript y Babel, y paquetes como Rollup y Webpack.

Encontrado en MDN

t3h2mas
fuente
Leí que esta función se implementó en una pregunta Sof, pero la fuente MDN es en realidad más confiable.
cdarwin
Según el siguiente enlace, Chrome 61 debería admitir la importación, pero no es así. medium.com/dev-channel/…
Marc
4
Tienes que agregar type = "module" a tu etiqueta de script.
smohadjer
10

funcionó para mí agregandotype="module" al script importmis mjs:

<script type="module">
import * as module from 'https://rawgit.com/abernier/7ce9df53ac9ec00419634ca3f9e3f772/raw/eec68248454e1343e111f464e666afd722a65fe2/mymod.mjs'

console.log(module.default()) // Prints: Hi from the default export!
</script>

Ver demostración: https://codepen.io/abernier/pen/wExQaa

Abernier
fuente