syntaxerror: cannot use import statement outside a module

Je suis tombé sur cette erreur : Uncaught SyntaxError : cannot use import statement outside a module while importing a function from a JavaScript file.

Cette erreur se produit pour une seule raison : vous essayez d'utiliser import et vous n'êtes pas dans un module ES.

Cela peut se produire dans un environnement Node.js ou dans le navigateur.

Tout d'abord, voici la solution pour Node.js : j'ai dû ajouter un fichier package.json dans le dossier du projet et ajouter :

{
  "type": "module"
}

Dans le navigateur, vous devez plutôt ajouter l'attribut type avec le module valeur lorsque vous chargez le script, comme ceci :

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

à la place de

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

Comment corriger en TypeScript "

Dans cette section, nous allons travailler avec un serveur Node de base en utilisant Express.

Notez que si vous utilisez la dernière version de TypeScript pour votre application Node, le fichier tsconfig.json a des règles par défaut qui empêchent l'erreur SyntaxError : Cannot use import statement outside a module error d'être soulevée.

Il est donc très probable que vous ne rencontriez pas l'erreur SyntaxError : Cannot use import statement outside a module error si vous.. :

Installez la dernière version de TypeScript, et utilisez le fichier tsconfig.json par défaut qui est généré lorsque vous exécutez tsc init avec la dernière version.
Configurez correctement TypeScript pour Node et installez les paquets nécessaires.
Mais supposons que vous n'utilisez pas les dernières configurations du fichier tsconfig.json.

Voici un serveur Express qui écoute sur le port 3000 et enregistre "Hello World !" sur la console :

import express from "express"

const app = express()

app.listen("3000", (): void => {
    console.log("Hello World!")
    // SyntaxError: Cannot use import statement outside a module
})

Le code ci-dessus semble devoir s'exécuter parfaitement mais le message SyntaxError : Cannot use import statement outside a module ".

Cela se produit parce que nous avons utilisé le mot-clé import pour importer un module : import express from "express".

Pour résoudre ce problème, allez dans le fichier tsconfig.json et faites défiler jusqu'à la section des modules.

Vous devriez voir une règle particulière comme celle-ci sous la section des modules :

/* Modules */
"module": "esnext" 

Pour résoudre le problème, changez la valeur "esnext" en "commonjs".

C'est-à-dire :

/* Modules */
"module": "commonjs"

/* Modules */
"module": "commonjs"

Pour résoudre le problème, changez la valeur "esnext" en "commonjs".

C'est-à-dire :