迁移至提升式导入后ESM模块循环引用报错的解决方法求助

你遇到的问题本质是ESM模块的导入会被提升到模块顶部，再加上这里存在循环依赖（index.ts导入b.ts，b.ts又导入index.ts），导致b.ts在初始化b时，index.ts里的a还没完成初始化，触发了ReferenceError。以下是不用退回CommonJS的几种解决方案：

1. 拆分模块消除循环依赖（最推荐） #

把共享的a变量抽离到独立的模块，彻底打破循环依赖关系：

// shared.ts
export const a = {foo: "bar"};

// index.ts
import {a} from "./shared";
import {b} from "./blah/b";
export {a}; // 保持原导出结构，不影响其他使用a的代码

// b.ts
import {a} from "../shared";
export const b = a.foo;

这种方法从根源解决问题，避免了循环依赖带来的所有潜在风险。

2. 惰性初始化延迟访问 #

修改b.ts，把b改为惰性获取的形式，确保只有当a完成初始化后才会访问它：

// b.ts
import {a} from "../index";
// 方案A：导出函数，调用时才获取值
export const getB = () => a.foo;

// 方案B：使用getter属性
export const b = {
  get value() {
    return a.foo;
  }
};

然后在index.ts或其他使用b的地方，通过调用函数或访问getter来获取值，而不是直接使用变量：

// index.ts
export const a = {foo: "bar"};
import {getB} from "./blah/b";

console.log(getB()); // 此时a已初始化，正常输出"bar"

3. 使用动态导入避开提升 #

在index.ts中用异步动态导入加载b.ts，确保a完成初始化后再加载并使用b：

// index.ts
export const a = {foo: "bar"};

// 异步加载b，此时a已经初始化完成
(async () => {
  const {b} = await import("./blah/b");
  // 在这里使用b，比如挂载到全局或者传递给其他函数
  console.log(b); // 输出"bar"
})();

注意动态导入是异步的，适合不需要同步使用b的场景。

4. 把变量改为导出函数 #

将a改为导出函数，即使导入被提升，调用函数时也能获取到完整的对象：

// index.ts
export const getA = () => ({foo: "bar"});
import {b} from "./blah/b";

// b.ts
import {getA} from "../index";
export const b = getA().foo;

这种方法通过函数调用延迟对象的创建，避开了初始化顺序问题。

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