Comment corriger l'erreur Uncaught SyntaxError: Cannot use import statement outside a module ?
La version ECMAScript6 a apporté de nombreuses nouveautés au langage JavaScript. Parmi celles-ci, il y a les modules. Le but de ces modules et de pouvoir regrouper des fonctionnalités spécifiques pour les importer et les utiliser dans d’autres programmes. Le message d’erreur "Cannot use import statement outside a module" est lié à l'utilisation des modules.
L'import dans son programme d'un module est fait en utilisant la balise <script>. Pour indiquer que le fichier importé est un module, il faut ajouter l'attribut "type" avec comme valeur "module".
<script type="module" src="chemin/vers/le/fichier/à/importer/du/module.js"></script>
Le message d'erreur "Cannot use import statement outside a module" indique que vous avez utilisé la directive import en dehors d'un module. Ce mot-clé est à utiliser uniquement au sein d'un module. Vous ne devez donc pas l'utiliser pour par exemple importer un module. Si ce n'est pas votre cas, alors c'est que vous n'avez pas importé le bon fichier pour utiliser le module. Lorsque l'on souhaite intégrer un module JavaScript dans le code de son programme, la première chose à faire et de bien lire la documentation et les exemples fournis par les créateurs. Avec ces éléments, on peut notamment trouver quel fichier il faut importer pour utiliser le module.
Les modules JavaScript sont maintenant codés avec des normes prédéfinies, pour qu'un développeur débutant avec un module s'y retrouve plus facilement. Dans la plupart des modules, vous trouverez un dossier "dist". Ce dossier contient les fichiers finaux de distribution du module. Ce sera certainement dans ce répertoire que se situera le fichier à importer. À l'inverse, il ne faut jamais importer directement dans votre code un fichier provenant du dossier "src", car ce sont des fichiers sources qui ne sont utilisés qu'à l'intérieur du module. Si vous faites ceci, vous aurez le message d'erreur décrit plus haut qui va s'afficher dans la console de votre navigateur.