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ê?

— 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

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