为什么HTML内嵌JS module脚本的第3行import语句会导致代码失效

ES 模块（即type="module"的脚本）具备原子失败特性：只要模块的依赖加载、解析、执行的任意环节抛出未捕获的错误，整个模块的顶层代码都会直接终止执行，不会运行错误点之后的代码。你遇到的问题本质就是import { foo } from "script.js"这行代码抛出了错误，导致后续绑定点击事件的代码完全没有执行。

常见的具体错误原因如下：

• 模块资源加载失败
  如果你是直接通过file://协议打开本地HTML文件测试，ES 模块的导入请求默认受CORS策略限制，本地文件服务没有返回符合要求的跨域头，浏览器会直接拦截该导入请求，抛出跨域错误。另外如果script.js的文件路径填写错误、文件名大小写不匹配、服务端返回404/500等错误状态，也会导致加载失败。
• 模块导出不匹配
  如果script.js中没有使用export语法导出名为foo的成员，或是仅用export default导出了默认成员，使用命名导入import { foo }时会抛出「模块不存在名为foo的导出」的语法错误，直接终止模块执行。
• 依赖模块内部执行报错
  就算script.js的加载和导出都符合预期，如果它的顶层代码运行时抛出了未捕获的错误（比如变量未定义、语法错误、运行时异常），也会连带导致导入它的父模块终止执行。

你可以按F12打开Edge的开发者工具，切换到「控制台」标签，就能看到具体的报错信息，直接定位问题根因。

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