模块导入导出循环依赖报错：Cannot access 'BaseClass' before initialization

问题根源 #

你遇到的是ES模块循环引用结合**类的暂时性死区（TDZ）**导致的错误，核心原因在于ES模块的导入机制和类的声明特性：

1. ES模块的导入会在模块执行前就被解析，建立模块间的绑定关系，不是等到代码执行到import语句才处理。
2. 类声明会被提升，但提升后会处于暂时性死区——在类声明语句执行完成前，无法访问这个类。

具体执行流程：

• 启动base-class.js时，首先声明BaseClass但未完成初始化（处于TDZ），随后模块解析到import { ExtendedBaseClass }，立刻触发extended-base-class.js的加载。
• extended-base-class.js导入BaseClass，此时BaseClass仍在TDZ中，当它试图继承这个未初始化的类时，就抛出了ReferenceError。

你觉得逻辑不通是因为误以为模块会按代码逐行执行，忽略了ES模块导入的预解析机制。

解决方案 #

方案1：使用动态导入延迟加载循环依赖模块

把base-class.js中的导入改为动态导入，确保BaseClass完成初始化后再加载依赖模块：

// base-class.js
export class BaseClass {}

// 动态导入，在BaseClass初始化完成后再加载并访问ExtendedBaseClass
import('./extended-base-class.mjs').then(({ ExtendedBaseClass }) => {
  console.log(ExtendedBaseClass);
});

方案2：使用顶层await（环境支持时）

如果你的运行环境支持顶层await（比如Node.js ESM、现代浏览器），可以用它等待循环依赖模块加载：

// base-class.js
export class BaseClass {}

// 顶层await确保BaseClass初始化后再获取ExtendedBaseClass
const { ExtendedBaseClass } = await import('./extended-base-class.mjs');
console.log(ExtendedBaseClass);

方案3：重构模块消除循环引用

如果业务允许，调整模块结构彻底避免循环引用——比如把base-class.js中对ExtendedBaseClass的使用移到第三个独立模块中，让base-class.js和extended-base-class.js只保持单向依赖。

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