HTML引入JavaScript模块报import语法错误如何解决及模块引用疑问

报错解决方法 #

导致该报错的常见原因及对应修复方案如下：

• 修正script标签写法：HTML规范不支持script标签自闭合，你当前写的<script type="module" src="./main.js"/>是错误的，必须补全闭合标签：

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

• 修正模块引入路径：你给出的项目结构里main.js位于modules文件夹下，如果你的HTML文件和modules文件夹平级，那么src属性的路径需要对应调整为./modules/main.js，否则浏览器会加载不到对应文件，返回404页面内容当成脚本解析，触发语法错误。
• 禁止用file协议访问页面：ES模块遵循同源策略，直接双击打开HTML用file://协议访问时，浏览器会拦截模块加载请求，导致报错。你需要启动本地静态服务访问页面，比如用VS Code的Live Server插件、或者全局安装http-server包启动服务，通过http://localhost开头的地址访问即可。
• 检查模块内导入路径写法：所有JS文件里的import语句必须补全.js后缀，且相对路径写法要准确，比如shapes.js里导入circle.js需要写import './shapes/circle.js'，不能省略后缀或者写错路径层级。

子模块引用问题 #

你完全可以只在HTML里引入main.js一个入口模块，不需要额外声明其他子模块。ES模块支持依赖自动递归加载，只要你所有import语句的路径写法正确，浏览器会自动顺着main.js的导入链，依次加载所有依赖的canvas.js、shapes.js、circle.js等子模块，不需要在HTML里单独引入。

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