Módulos ES6 no navegador: SyntaxError não capturado: importação de token inesperada

86

Sou novo no ES6 (ECMAScript 6) e gostaria de usar seu sistema de módulos no navegador. Eu li que ES6 é compatível com Firefox e Chrome, mas estou recebendo o seguinte erro ao usarexport

Uncaught SyntaxError: Unexpected token import

Eu tenho um arquivo test.html

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

e um arquivo test.js

'use strict';

class Test {

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

export Test;

Por quê?

javascript html ecmascript-6 module es6-modules cdarwin
fonte
Módulos ES6 ainda não são suportados no navegador. Além disso, você ainda está carregando um script, não um módulo.
Bergi
3
Ainda não entendo a diferença entre um script e um módulo
cdarwin
Veja aqui
Bergi
20
A parte importante que percebi é <script type="module"></script>que você acrescenta que, do contrário, você obterá esse erro. Eu estava batendo minha cabeça na parede continuamente fazendo com <script>import ... </script>conhecimento de causa que agora se diz que o Chrome suporta módulos ES6 sem sinalizadores, então percebi que o atributo type foi necessário para especificar para o navegador que este é um módulo ES6, sem o qual você obtém exatamente erro.
Emmanuel Mahuni
1
Estou usando o Chrome 68, mas ainda vejo este erro quando usamos import * from
Integração de

Respostas:

66

Muitos navegadores modernos agora oferecem suporte a módulos ES6. Contanto que você importe seus scripts (incluindo o ponto de entrada para seu aplicativo), <script type="module" src="...">ele funcionará.

Dê uma olhada em caniuse.com para mais detalhes: https://caniuse.com/#feat=es6-module

vullnetyy
fonte
53

Você pode experimentar os Módulos ES6 no Google Chrome Beta (61) / Chrome Canary.

Implementação de referência de ToDo MVC por Paul Irish - https://paulirish.github.io/es-modules-todomvc/

Tenho uma demonstração 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 que ajude!

Roopesh Reddy
fonte
33
Isso mesmo ... A parte importante que percebi é <script type="module"></script>que você acrescenta que, do contrário, obterá aquele erro. Eu estava batendo minha cabeça na parede continuamente, <script>import ... </script>sabendo que agora se diz que o Chrome suporta módulos ES6 sem sinalizadores, então percebi que o atributo type era necessário para especificar para o navegador que se tratava de um módulo ES6.
Emmanuel Mahuni
1
{"message": "Uncaught SyntaxError: Unexpected token {", "filename": " stacksnippets.net/js ", "lineno": 24, "colno": 8}
hoogw
4
Eu recebi o erro acima ao executar seu snippet de código acima, use o Chrome v67, por quê?
hoogw
@hoogw Stackoverflow adicionou esse snippet de código Run automaticamente. Este código não pode ser executado como está. Você tem que copiar o código para index.html e separar os arquivos .js conforme mostrado acima e tentar no navegador!
Roopesh Reddy
Obrigado resposta útil. Removi o corredor de snippet para você. (Como eu vi os snippets StackOverflow não podem ter mais de uma jsfonte).
Mir-Ismaili de
25

Infelizmente, muitos navegadores não têm suporte para módulos no momento.

Este recurso está apenas começando a ser implementado em navegadores nativamente neste momento. Ele é implementado em muitos transpilers, como TypeScript e Babel, e bundlers, como Rollup e Webpack.

Encontrado em MDN

t3h2mas
fonte
Eu li que esse recurso foi implementado em uma pergunta do Sof, mas a fonte de MDN é realmente mais confiável.
cdarwin
De acordo com o link a seguir, o Chrome 61 deve oferecer suporte à importação - não. medium.com/dev-channel/...
Marc
4
Você deve adicionar type = "module" à sua tag de script.
smohadjer
10

funcionou para mim adicionartype="module" ao script importmeus 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>

Veja a demonstração: https://codepen.io/abernier/pen/wExQaa

abernier
fonte