为什么HTML中引入的app.js使用import导入模块会报错

问题原因 #

报错Cannot use import statement outside a module的根本原因是：浏览器默认将<script>标签加载的JS文件识别为普通脚本，不支持ES模块化的import/export语法，只有显式标记为模块的脚本才能使用这类语法。

修复步骤 #

1. 修改HTML脚本引入规则 #

给入口脚本app.js添加type="module"属性，同时删除已经通过import导入的子模块的单独引入声明，避免重复加载：

<!-- Scripts -->
<!-- Bootstrap -->
<script src="assets/plugins/bs/bs.js"></script>
<!-- APP 入口脚本添加type="module"属性 -->
<script src="assets/js/app.js" type="module"></script>

2. 补全导入路径的文件后缀 #

浏览器加载ES模块时不会自动补全文件后缀，必须在导入路径中手动添加.js后缀，修改app.js代码如下：

import elements from "./Elements.js";
import SmashTheHamster from "./SmashTheHamster.js";

3. 其他注意事项 #

• 确认模块导出语句拼写正确，正确写法为export default 模块名，你描述中的export defaut存在拼写错误，会导致模块导出失败
• 不要使用本地文件协议（file://）直接打开HTML页面，会触发跨域限制导致模块加载失败，需使用本地开发服务器（如VS Code的Live Server插件）启动服务访问
• 不需要使用模块化语法的普通脚本（如示例中的bs.js）无需添加type="module属性，保持原有写法即可

内容的提问来源于stack exchange，提问作者F.Ghost