Webpack中类循环导入出现初始化错误，是代码还是工具问题？

这是循环引用导致的ES模块初始化顺序问题，并非Webpack的bug，你的代码写法违反了ES模块的执行规范。

原因说明 #

你的代码中存在循环依赖：a.js导入B，b.js又导入A。ES模块里，类声明属于暂时性死区范畴，当b.js试图以A作为父类时，A还未完成初始化（a.js正等待b.js加载完成），因此触发Cannot access 'A' before initialization错误。

原生JS环境能运行，是因为你大概率没使用ES模块（比如直接用脚本标签加载，无import/export），此时类挂载到全局作用域，初始化逻辑不同，不会触发暂时性死区限制。

解决方案 #

方案1：动态导入延迟加载

修改a.js，在fct内部动态导入B，避开初始化阶段的循环依赖：

// a.js
export default class A {
  constructor() {}
  async fct() {
    const { default: B } = await import("./b.js");
    this.b = new B();
  }
}

调用时需配合async/await：

// index.js
import A from "./a.js";
(async () => {
  let a = new A();
  await a.fct();
})();

方案2：合并类到同一文件

消除循环依赖最直接的方式是把A和B放在同一个文件中：

// a-and-b.js
export class A {
  constructor() {}
  fct() {
    this.b = new B();
  }
}

export class B extends A {
  constructor() {
    super();
  }
}

// index.js
import { A } from "./a-and-b.js";
let a = new A();
a.fct();

方案3：使用原型继承（不推荐）

通过原型继承替代类语法的extends，绕开类的暂时性死区限制，但可读性较差：

// a.js
export default class A {
  constructor() {}
  fct() {
    const B = require("./b.js").default;
    this.b = new B();
  }
}

// b.js
const A = require("./a.js").default;
function B() {
  A.call(this);
}
B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;

module.exports = B;

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