Problem using import/export in Javascript "Uncaught SyntaxError: Cannot use import statement outside a module"

Question

我正在学习 Javascript，但在使用 import/export 模块化我的代码时遇到了问题。我试图通过阅读 MDN Web 文档 (Mozilla) 中的 this and this 来了解这一点，但失败了。 我知道这里已经有人问过了，但我无法解决问题。

我在网络浏览器终端中得到的错误是：Uncaught SyntaxError: Cannot use import statement outside a module

我将插入一个小示例，说明我如何尝试使用 import/export:

index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
    </head>
    <body>
        <h1 class="title">Example</h1>
        <button class="title-button">Change title</button>
        <!--
            I tried adding this line but nothing has changed:
            <script type="module" src="module.js"></script>
        --->
        <script src='main.js'></script>
    </body>
</html>

module.js:

const changeTitle = newTitle => {
    const title = document.querySelector(".title");
    
    title.innerHTML = newTitle;
}

export { changeTitle };

main.js:

import { changeTitle } from "./module";

const titleButton = document.querySelector(".title-button");

titleButton.addEventListener("click", () => {
    let newTitle = prompt("Enter new title:");
    
    changeTitle(newTitle);
});

注意：三个文件都在同一个文件夹中。

感谢您的宝贵时间。对不起，如果我在这个 post.

中犯了错误

Answer 1

type="module"属性必须添加到使用导入语句的脚本中（在本例中为main.js）。我的错误是试图在 module.js 中添加 type="module" 而不是 main.js

Problem using import/export in Javascript "Uncaught SyntaxError: Cannot use import statement outside a module"

Problem using import/export in Javascript "Uncaught SyntaxError: Cannot use import statement outside a module"

javascript

html

import

module

export