Obtendo exportação inesperada de tokens

Estou tentando executar algum código ES6 no meu projeto, mas estou recebendo um erro inesperado de exportação de token.

export class MyClass {
  constructor() {
    console.log("es6");
  }
}

Você está usando a sintaxe do módulo ES6.

Isso significa que seu ambiente (por exemplo, node.js) deve suportar a sintaxe do módulo ES6.

O NodeJS usa a sintaxe do módulo CommonJS ( module.exports) e não a sintaxe do módulo ES6 (export palavra-chave).

Solução:

• Use o babelpacote npm para transpilar seu ES6 para um commonjsdestino

ou

• Refatorar com sintaxe CommonJS.

Exemplos de sintaxe CommonJS são (de flaviocopes.com/commonjs/ ):

• exports.uppercase = str => str.toUpperCase()
• exports.a = 1

Caso você receba esse erro, ele também pode estar relacionado à forma como você incluiu o arquivo javascript na sua página html. Ao carregar os módulos, você deve declarar explicitamente esses arquivos como tal. Aqui está um exemplo:

//module.js:
function foo(){
   return "foo";
}

var bar = "bar";

export { foo, bar };

Quando você inclui o script assim:

<script src="module.js"></script>

Você receberá o erro:

SyntaxError não capturado: exportação inesperada de tokens

Você precisa incluir o arquivo com um atributo de tipo definido como "módulo":

<script type="module" src="module.js"></script>

E então funcionará conforme o esperado e você estará pronto para importar seu módulo em outro módulo:

import { foo, bar } from  "./module.js";

console.log( foo() );
console.log( bar );

Meus dois centavos

Exportar

ES6

myClass.js

export class MyClass1 {
}
export class MyClass2 {
}

other.js

import { MyClass1, MyClass2 } from './myClass';

CommonJS Alternative

myClass.js

class MyClass1 {
}
class MyClass2 {
}
module.exports = { MyClass1, MyClass2 }
// or
// exports = { MyClass1, MyClass2 };

other.js

const { MyClass1, MyClass2 } = require('./myClass');

Padrão de exportação

ES6

myClass.js

export default class MyClass {
}

other.js

import MyClass from './myClass';

CommonJS Alternative

myClass.js

module.exports = class MyClass1 {
}

other.js

const MyClass = require('./myClass');

Espero que isto ajude

Para usar o ES6, adicione babel-preset-env

e no seu .babelrc:

{
  "presets": ["@babel/preset-env"]
}

Resposta atualizada graças ao comentário @ghanbari para aplicar babel 7.

Não há necessidade de usar o Babel neste momento (o JS se tornou muito poderoso) quando você pode simplesmente usar as exportações padrão do módulo JavaScript. Veja o tutorial completo

Message.js

module.exports = 'Hello world';

app.js

var msg = require('./Messages.js');

console.log(msg); // Hello World

Instale os pacotes babel @babel/coree @babel/presetque converterão o ES6 em um destino commonjs, já que o nó js não entende os destinos do ES6 diretamente

npm install --save-dev @babel/core @babel/preset-env

Em seguida, você precisa criar um arquivo de configuração com o nome .babelrcno diretório raiz do seu projeto e adicionar esse código lá

{ "presets": ["@babel/preset-env"] }

Corrigi isso criando um arquivo de ponto de entrada como.

// index.js
require = require('esm')(module)
module.exports = require('./app.js')

e qualquer arquivo que eu importei dentro app.jse além trabalhou comimports/exports agora você apenas executa comonode index.js

Nota: se app.jsusado export default, isso se torna require('./app.js').defaultao usar o arquivo do ponto de entrada.

O uso da sintaxe do ES6 não funciona no nó, infelizmente, você precisa ter o babel aparentemente para fazer o compilador entender a sintaxe, como exportação ou importação.

npm install babel-cli --save

Agora precisamos criar um arquivo .babelrc. No arquivo babelrc, definiremos o babel para usar a predefinição es2015 que instalamos como predefinição ao compilar no ES5.

Na raiz do nosso aplicativo, criaremos um arquivo .babelrc. $ npm install babel-preset-es2015 --save

Na raiz do nosso aplicativo, criaremos um arquivo .babelrc.

{  "presets": ["es2015"] }

Espero que funcione ... :)