Obtention d'une exportation de jeton inattendue

221

J'essaie d'exécuter du code ES6 dans mon projet mais j'obtiens une erreur d'exportation de jeton inattendue.

export class MyClass {
  constructor() {
    console.log("es6");
  }
}
Jason
la source
5
il n'y a pas suffisamment d'informations sur votre environnement ou votre configuration pour offrir une assistance. Cette erreur suggère que le webpack ou le babel ne fonctionnent pas correctement, car ils exportne sont disponibles que dans ES6, et ces modules fournissent la prise en charge d'ES6.
Claies
24
Vous devez utiliser module.exports = MyClass, pasexport class MyClass
onmyway133

Réponses:

249

Vous utilisez la syntaxe du module ES6.

Cela signifie que votre environnement (par exemple node.js) doit prendre en charge la syntaxe du module ES6.

NodeJS utilise la syntaxe du module CommonJS ( module.exports) et non la syntaxe du module ES6 ( exportmot clé).

Solution:

  • Utilisez le babelpackage npm pour transpiler votre ES6 vers une commonjscible

ou

  • Refactor avec la syntaxe CommonJS.

Voici des exemples de syntaxe CommonJS (sur flaviocopes.com/commonjs/ ):

  • exports.uppercase = str => str.toUpperCase()
  • exports.a = 1
Phil Ricketts
la source
15
Quand nodejs prendra-t-il en charge importnativement? Je pensais que la version 10.0.0 l'aurait mais apparemment pas.
chovy
4
Le support expérimental de @chovy est disponible avec l'indicateur "--experimental-modules". Les fichiers doivent avoir une extension .mjs
Giovanni P.
1
Je reçois cette erreur en utilisant Chrome 66 avec une prise en charge native des modules.
Tom Russell
BTW: notez que bien que node10 / node12 prennent en charge les modules derrière l'indicateur, ils ne le prennent pas en mode REPL - mais il est pris en charge en mode eval dans node12 .
jakub.g
2
Car quelqu'un n'est toujours pas clair sur la syntaxe CommonJs. veuillez vérifier ce lien, peut aider un peu. flaviocopes.com/commonjs
LT
142

Dans le cas où vous obtenez cette erreur, cela peut également être lié à la façon dont vous avez inclus le fichier javascript dans votre page html. Lors du chargement des modules, vous devez déclarer explicitement ces fichiers comme tels. Voici un exemple:

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

var bar = "bar";

export { foo, bar };

Lorsque vous incluez le script comme ceci:

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

Vous obtiendrez l'erreur:

SyntaxError non capturée: exportation inattendue de jetons

Vous devez inclure le fichier avec un attribut de type défini sur "module":

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

Et puis cela fonctionnera comme prévu et vous êtes prêt à importer votre module dans un autre module:

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

console.log( foo() );
console.log( bar );
Se flétrir
la source
37
contrairement à la réponse "le plus voté", cela résout en fait le problème et explique pourquoi cela se produit sans suggérer que la seule option est de tirer parti d'une méthode CommonJS, d'une méthode APM ou de transpiler notre code ... Ce serait également une exception à la norme w3c où typedevrait être un type MIME valide (aka. type de média), donc c'était une découverte inattendue. Merci!
Shaun Wilson
4
Cela corrige l'erreur mais j'obtiens ensuite "Jeton inattendu {" sur la ligne de l'instruction d'importation dans Chrome 67 avec un script en ligne, par exemple <script> import ... </script>
PandaWood
1
@PandaWood Vous devez utiliser <script type="module">import ...</script>, lorsque vous importez à partir du module. Je l'ai testé dans une version récente de Chromium.
Vladimir S.
Cela a résolu mon problème :)
user3651476
Pure JS (ES6) a pris en charge l'importation et cela explique exactement pourquoi j'ai rencontré cela
Eric
16

Mes deux centimes

Exportation

ES6

myClass.js

export class MyClass1 {
}
export class MyClass2 {
}

other.js

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

Alternative à CommonJS

myClass.js

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

other.js

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

Exporter par défaut

ES6

myClass.js

export default class MyClass {
}

other.js

import MyClass from './myClass';

Alternative à CommonJS

myClass.js

module.exports = class MyClass1 {
}

other.js

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

J'espère que cela t'aides

Barnstokkr
la source
Pour l'exemple d'exportation par défaut ES6, vous avez écrit «exportation par défaut», mais ce devrait être «exportation par défaut».
IAM_AL_X
@IAM_AL_X Merci pour la capture :-)
Barnstokkr
10

Pour utiliser ES6, ajoutez babel-preset-env

et dans votre .babelrc:

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

Réponse mise à jour grâce au commentaire @ghanbari pour appliquer babel 7.

Jalal
la source
8
sa question n'est pas d'expliquer babel. Alors pourquoi répondre à quelque chose de non requis qui pourrait en dérouter d'autres?
Jalal
7
@monsto cette question a déjà été taguée babelpar l'auteur. Bien que la réponse de Phil Ricketts clarifie le problème, ce qui est bien, cette réponse est une solution directe au problème de l'auteur.
boycy le
"@ babel / preset-env"
ghanbari
6

Il n'est pas nécessaire d'utiliser Babel pour le moment (JS est devenu très puissant) lorsque vous pouvez simplement utiliser les exportations de module JavaScript par défaut. Consultez le didacticiel complet

Message.js

module.exports = 'Hello world';

app.js

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

console.log(msg); // Hello World
Alvin Konda
la source
2
Eh bien, comment exporteriez-vous une classe alors?
Sherwin Ablaña Dapito
1
Je supprime ma réponse car la question était en fait pour ES6 et non CommonJS utilisé par NodeJS. Veuillez vérifier ci-dessus pour une réponse.
Alvin Konda
@ SherwinAblañaDapito module.exports = class MyClass {} fonctionne
Marian Klühspies
3

Installez les packages babel @babel/coreet @babel/presetqui convertira ES6 en une cible commonjs car le nœud js ne comprend pas directement les cibles ES6

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

Ensuite, vous devez créer un fichier de configuration avec nom .babelrcdans le répertoire racine de votre projet et y ajouter ce code

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

YouBee
la source
J'avais également besoin d'installer @ babel / register, sinon j'obtiendrais toujours "SyntaxError: Impossible d'utiliser l'instruction d'importation en dehors d'un module"
moléculaire
3

J'ai corrigé cela en créant un fichier de point d'entrée comme.

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

et tout fichier que j'ai importé à l'intérieur app.jset au-delà a travaillé avec imports/exports maintenant vous l'exécutez commenode index.js

Remarque: en cas d' app.jsutilisation export default, cela devientrequire('./app.js').default lors de l'utilisation du fichier de point d'entrée.

Alex Cory
la source
1
Meilleure réponse pour les projets simples ne nécessitant pas de babel, webpack, colis etc ... J'ai utilisé dans le projet monorepo avec simple / server express pour le projet. A fonctionné comme un charme ...
mattdlockyer
-3

L'utilisation de la syntaxe ES6 ne fonctionne pas dans le nœud, malheureusement, vous devez avoir babel apparemment pour que le compilateur comprenne la syntaxe telle que l'exportation ou l'importation.

npm install babel-cli --save

Maintenant, nous devons créer un fichier .babelrc, dans le fichier babelrc, nous allons configurer babel pour utiliser le préréglage es2015 que nous avons installé comme son préréglage lors de la compilation en ES5.

À la racine de notre application, nous allons créer un fichier .babelrc. $ npm install babel-preset-es2015 --save

À la racine de notre application, nous allons créer un fichier .babelrc.

{  "presets": ["es2015"] }

Esperons que ça marche ... :)

purushottam banerjee
la source