Module ES6 Importation donnant "Uncaught SyntaxError: identifiant inattendu"

Question

Pour un projet personnel, je suis en train d'utiliser ES6 importation d'écrire plus propre code. Comme premier test, je suis en train d'écrire un objet qui devrait générer un menu. L'ensemble du code est de travailler quand je suis directement le chargement de la classe, mais lors de l'utilisation de l'importation et l'exportation dans l'ES6, il donne un "Uncaught SyntaxError: Unexpected identificateur" erreur sur l' import ligne 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 des lignes de code.

À l'aide de l' <script type="module"> ligne ou non ne semble pas faire toute la différence pour moi. J'ai à la fois le chrome drapeaux à des fins expérimentales et ES6 les Modules activés, et que, sans eux, j'ai reçu un message d'erreur à propos de import n'est pas définie.

La version Chrome serait de 62, donc, selon différentes sources (y compris google, mise à jour du journal lui-même), il convient de travailler, même sans les drapeaux.

Quelqu'un peut-il m'éclairer que de pourquoi cela ne fonctionne pas, et ce que je fais de mal?

Answer 1

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.

Answer 2

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.