为何我的原生JavaScript项目出现'Uncaught SyntaxError: ambiguous indirect export'错误？

错误原因 #

你的代码存在导出与导入语法不匹配的问题：

• 在anchors.js中，你用export default导出了一个包含两个函数的对象，这属于默认导出（一个模块只能有一个默认导出）。
• 但在导入文件中，你使用了命名导入的语法（{ anchor_a, anchor_b }），这种语法专门用来导入模块中用export单独声明的命名导出项。

两种语法不兼容，浏览器无法从默认导出的对象中解析出对应的命名导出项，因此抛出Uncaught SyntaxError: ambiguous indirect export: anchor_b错误。

修复方案 #

有两种可行的修复方式，任选其一即可：

方案一：改用命名导出（推荐） #

修改anchors.js，直接为每个函数添加export关键字，声明为命名导出：

// anchors.js
export let anchor_a = () => "abcd1234";
export let anchor_b = () => "xyz789";

导入文件的代码无需修改，保持原有的命名导入语法即可正常运行：

// 文件2
import { anchor_a, anchor_b } from "./anchors.js";
console.log(anchor_a());
console.log(anchor_b());

方案二：保持默认导出，调整导入方式 #

如果想继续使用默认导出，需要修改导入文件的代码，先导入默认导出的对象，再从中获取需要的函数：

// 文件2
import anchors from "./anchors.js";
// 解构出两个函数
const { anchor_a, anchor_b } = anchors;

console.log(anchor_a());
console.log(anchor_b());

或者直接通过对象属性访问：

// 文件2
import anchors from "./anchors.js";

console.log(anchors.anchor_a());
console.log(anchors.anchor_b());

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