ES6模块导入给出“Uncaught SyntaxError：Unexpected identifier” [英] ES6 module Import giving "Uncaught SyntaxError: Unexpected identifier"

问题描述

对于个人项目，我正在尝试使用ES6导入来编写更清晰的代码。作为第一次测试，我正在编写一个应该生成菜单的对象。当我直接加载类时，整个代码正在工作，但是当在ES6中使用导入和导出时，它在 import 中的行> main.js

For a personal project, I'm trying to use ES6 import to write cleaner code. As first test, I'm writing an object that should generate a menu. The whole code is working when I'm directly loading up the class, yet when using the import and export in ES6, it gives an "Uncaught SyntaxError: Unexpected identifier" error on the import line in main.js

我有以下文件：

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">

请注意，这些只是相关的代码行。

Note that these are only the relevant lines of code.

使用< script type =module> 一行对我来说似乎没有任何影响。我确实启用了实验性和ES6模块的chrome标志，因为没有它们我收到了关于 import 未定义的错误。

Using the <script type="module"> line or not did not seem to make any difference for me. I do have both the chrome flags for experimental and ES6 Modules enabled, as without them I received an error about import not being defined.

Chrome版本为62，因此根据不同的来源（包括谷歌的更新日志本身），这应该可以正常工作，即使没有标记。

Chrome version would be 62, so according to different sources (including google's update log itself) this should be working, even without the flags.

任何人都可以启发我，为什么这不起作用，我做错了什么？

Can anyone enlighten me as of why this is not working, and what I am doing wrong?

推荐答案

正如@Bergi在评论中提到的那样，将 type =module添加到 main.js 导入行解决了该问题。现在一切正常。

As @Bergi mentioned in the comment, adding type="module" to the main.js import line solved the issue. All is working now.

感谢所有回复并试图提供帮助的人。

Thanks to all of you who responded and tried to help.

这篇关于ES6模块导入给出“Uncaught SyntaxError：Unexpected identifier”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！