web-dev-qa-db-fra.com

Module ES6 Importation donnant "Uncaught SyntaxError: identifiant inattendu"

Pour un projet personnel, j'essaie d'utiliser l'importation ES6 pour écrire du code plus propre. En tant que premier test, j'écris un objet qui devrait générer un menu. Tout le code fonctionne lorsque je charge directement la classe, mais lorsque vous utilisez l'importation et l'exportation dans ES6, une erreur "Uncaught SyntaxError: identifiant inattendu" est générée sur la ligne import de main.js.

J'ai les fichiers suivants:

assets/js/menu.module.js

'use strict';

export default class Menu
{ ... }

assets/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.

Utiliser ou non la ligne <script type="module"> ne semblait pas avoir d’importance pour moi. Les deux indicateurs chrome pour les modules expérimentaux et ES6 sont activés. Sans eux, une erreur s'est produite concernant le fait que import n'était pas défini.

La version de Chrome serait 62, alors 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 la raison pour laquelle cela ne fonctionne pas et ce que je fais mal?

javascriptecmascript-6es6-modules
50
ZeroThe2nd

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.

46
ZeroThe2nd

D'après ce que je peux voir, vous essayez de charger le fichier menu.module.js alors qu'il s'appelle en fait menu.js.

PS: D'après mes souvenirs, vous pouvez également supprimer le .js de la déclaration d'importation.

3
Marcel Krause