Importation de module ES6 donnant " SyntaxError non intercepté: identifiant inattendu"
Pour un projet personnel, j'essaie D'utiliser ES6 import pour écrire du code plus propre. Comme premier test, j'écris un objet qui devrait générer un menu. Tout le code fonctionne lorsque je charge directement la classe, mais lors de l'utilisation de l'import et de l'export dans ES6, il donne une erreur" Uncaught SyntaxError: unexpected identifier " sur la ligne import
dans main.js
J'ai ce qui suit fichiers:
Actifs/js/menu.module.js
'use strict';
export default class Menu
{ ... }
Actifs/js/main.js
import Menu from "./menu.module.js";
window.addEventListener('DOMContentLoaded', () => {
const menu = new Menu();
});
Index.html
<script type="module" src="assets/js/menu.module.js"></script>
<script src="assets/js/main.js">
Notez que ce ne sont que les lignes de code pertinentes.
L'utilisation de la ligne <script type="module">
ou non ne semblait pas faire de différence pour moi. J'ai les deux drapeaux chrome pour les Modules expérimentaux et ES6 activés, car sans eux, j'ai reçu une erreur à propos de import
n'étant pas défini.
La version Chrome serait 62, donc selon différentes sources (y compris le journal de mise à jour de google lui-même) cela devrait fonctionner, même sans les drapeaux.
Quelqu'un peut-il m'éclairer sur pourquoi cela ne fonctionne pas, et ce que je fais mal?
2 réponses
Comme @Bergi l'a mentionné dans le commentaire, l'ajout de type="module"
à la ligne d'importation main.js
a résolu le problème. Tout fonctionne maintenant.
Merci à vous tous qui avez répondu et essayé d'aider.
D'après ce que je peux voir, vous essayez de charger le fichier menu.module.js
alors qu'il est réellement nommé menu.js
.
PS: D'après ce que je me souviens, vous pouvez également supprimer le .js
de l'instruction import.