求助：JS中出现Cannot use import statement outside a module错误

核心问题 #

你仅将shoppingCart.js标记为模块脚本，但**index.js中使用了import语句，同样需要声明为模块**。浏览器会把未设置type="module"的脚本当作传统脚本，不支持ES模块的import/export语法，这就是报错的原因。

修改方案 #

修改index.html中index.js对应的<script>标签，添加type="module"属性：

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 模块脚本默认延迟执行，无需额外加defer -->
  <script type="module" src="./shoppingCart.js"></script>
  <script type="module" src="./index.js"></script>
  <title>Modern JavaScript Development: Modules and Tooling</title>
</head>

<body>
  <h1>Modern JavaScript Development: Modules and Tooling</h1>
</body>

</html>

补充说明 #

• 所有使用ES模块语法（import/export）的脚本，都必须通过type="module"声明为模块脚本
• 模块脚本默认拥有defer的特性，脚本会在DOM解析完成后执行，所以无需额外添加defer属性
• 模块脚本拥有独立的作用域，不会污染全局作用域，这也是模块的优势之一

修改后重新在Chrome或Edge中运行页面，就能正常调用addToCart函数并打印日志了。

内容的提问来源于stack exchange，提问作者kapiljoshi07