为什么JavaScript ES模块的import/export语句运行报错？

问题原因 #

• 导入导出语法不匹配：foo1.js中使用的是命名导出语法export {a}，未声明默认导出，但foo2.js使用了默认导入语法import a from "./foo1.js"，两者不符合ES Module规范的对应规则：命名导出的变量必须用命名导入语法引入，默认导入仅能引入模块的default导出内容。
• HTML脚本配置冗余：foo2.js已经依赖foo1.js，浏览器加载foo2.js时会自动拉取对应依赖，不需要单独引入foo1.js作为独立模块，当前的脚本引入顺序也属于不合理配置。

解决方案 #

可任选以下任意一种方案修复：

方案1：修改foo2的导入语法，适配foo1的命名导出 #

将foo2.js的导入语句调整为命名导入格式：

import {a} from "./foo1.js";
console.log(a);

方案2：修改foo1的导出语法，适配foo2的默认导入 #

将foo1.js的导出语句调整为默认导出格式：

const a = 2;
export default a;

修复语法问题后，可清理HTML中的冗余脚本引入，仅保留foo2.js的引入即可：

<script src='./scripts/foo2.js' type='module'></script>

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