ES6模块导入出现“Uncaught SyntaxError: Unexpected identifier”错误。

Question

为了一个个人项目，我试图使用ES6的import来编写更干净的代码。作为第一次测试，我正在编写一个应该生成菜单的对象。当我直接加载类时，整个代码都可以工作，但是当使用ES6中的import和export时，在main.js中的import行会给出“Uncaught SyntaxError：Unexpected identifier”错误。

我有以下文件：

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

请注意，以下是相关的代码行。

对于我来说，使用<script type="module">行或不使用似乎没有任何区别。 我已经启用了实验性和ES6模块的Chrome标志，因为如果没有它们，我会收到有关import未定义的错误。

Chrome版本应该是62，因此根据不同的来源（包括Google的更新日志本身），即使没有这些标志，它也应该正常工作。

有人能告诉我为什么这不起作用以及我做错了什么吗？

- ZeroThe2nd

---

有关联的行号吗？错误在哪个文件中？ - Agney

@BoyWithSilverWings 忘记添加了，现在已经添加。它在 main.js 的 import 行中。 - ZeroThe2nd

main.js 也需要 type="module" 吗？毕竟它使用了模块语法。 - Bergi

你的 window.addEventListener( 调用缺少一个闭合括号。 - Bergi

如果您没有使用HTML呢？ - Vappor Washmade

@VapporWashmade，那听起来像是一个独立的问题，因为我的问题最初是关于浏览器中的ES6模块。你已经将它作为一个单独的问题发布了吗？因为没有更多的上下文，很难确定问题所在。 - ZeroThe2nd

Answer 1

正如评论中@Bergi所提到的，向HTML中的main.js导入行添加type="module"解决了该问题。现在一切都正常工作。即：

<script type="module" src="assets/js/main.js">

感谢所有回复并尝试帮助的人。

- ZeroThe2nd

---

@TomRussell 是哪个评论？因为我找不到它。对我来说问题在于 type="module" 这个东西。 - ZeroThe2nd

在哪里？哪条评论？解决方案是什么？ - Pithikos

@bernard @Pithikos 你们还需要在主脚本中添加 type='module'。这正是你们在评论中提到的答案所描述的。就是这个：https://dev59.com/qlYN5IYBdhLWcg3wT2ta#47633417 - ZeroThe2nd

在文件中应该在哪里添加 type="module"？ - ChumiestBucket

注意，这也解决了我收到的错误，“未捕获的SyntaxError:无法在模块外使用import语句”。我认为值得注意的是，如果其他人看到了这个错误而不是原帖中提到的那个错误，可以参考这个解决方法。 - John Spiegel

Answer 2

根据我所看到的，您试图加载文件menu.module.js，但实际文件名为menu.js。

附注：据我记得，您也可以在导入语句中省略.js。

- Marcel Krause

---

我遇到了类似的情况，但是我使用php来注入脚本。我只使用了原生的javascript，并且需要在我的导入中加上“.js”扩展名才能使其正常工作。我知道在React中不需要“.js”扩展名，但我猜这会因为你所处的环境而有所不同。希望这能帮助其他人。 - Hunter

Answer 3

你可以使用任何模块打包工具，其中一种简单灵活的解决方案是parcel 2，它目前处于测试版，但你可以尝试使用它。

 - npm i -D parcel@next
 - parcel index.html

- Muhammed Moussa