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,但在使用 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.
中犯了错误
type="module"
属性必须添加到使用导入语句的脚本中(在本例中为main.js
)。我的错误是试图在 module.js
中添加 type="module"
而不是 main.js
我正在学习 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.
中犯了错误type="module"
属性必须添加到使用导入语句的脚本中(在本例中为main.js
)。我的错误是试图在 module.js
中添加 type="module"
而不是 main.js