Webpack@4.43.0引入Stretch WASM库构建报错及异步导入疑问

你的问题核心在于Webpack 4不允许WebAssembly模块被打包进初始同步chunk，必须通过异步import()加载，但直接在类外部异步赋值的方式会导致构造函数执行时模块还未加载完成，从而出现"不是构造函数"的错误。下面给出两种可行的解决方案：

方案一：使用静态异步工厂方法创建类实例 #

这种方式确保Wasm模块加载完成后再初始化类的依赖，彻底避免异步加载的时序问题：

class Base {
  public layoutNode;

  // 私有构造函数，确保只能通过create方法创建实例
  private constructor(allocator: any, Node: any) {
    this.layoutNode = new Node(allocator, {});
  }

  // 静态异步方法，负责加载Wasm模块并创建实例
  static async create() {
    // 异步导入Stretch模块
    const { Allocator, Node } = await import('stretch-layout');
    // 实例化Allocator（你之前的代码里遗漏了这关键一步）
    const allocator = new Allocator();
    // 模块加载完成后，安全创建Base实例
    return new Base(allocator, Node);
  }
}

// 使用方式：通过create方法异步获取可用实例
Base.create().then(baseInstance => {
  console.log('Base实例已初始化:', baseInstance.layoutNode);
  // 在这里正常使用baseInstance的布局能力
});

方案二：类实例同步创建，延迟初始化Wasm依赖 #

如果需要同步创建类实例，但可以接受布局相关属性延迟初始化，可以在类内部维护加载Promise，在需要使用时等待加载完成：

class Base {
  public layoutNode: any;
  // 提前发起Wasm模块加载请求，复用Promise避免重复加载
  private readonly modulePromise = import('stretch-layout');

  constructor() {
    // 构造函数同步执行，不阻塞Wasm加载
  }

  // 异步初始化方法，完成layoutNode的创建
  async initLayout() {
    const { Allocator, Node } = await this.modulePromise;
    const allocator = new Allocator();
    this.layoutNode = new Node(allocator, {});
  }
}

// 使用方式：
const base = new Base();
// 在需要使用layoutNode前调用initLayout并等待完成
base.initLayout().then(() => {
  console.log('布局节点已初始化:', base.layoutNode);
});

关键注意点 #

1. 不要在同步代码中直接使用异步加载的模块：import()是异步操作，返回Promise，必须等待其完成后才能访问导出的类/方法，否则会拿到null或undefined。
2. Webpack配置验证：确保你的resolve.extensions中包含.wasm，且没有用file-loader等工具错误处理Wasm文件（Webpack 4内置了Wasm处理逻辑，只需异步导入即可）。
3. Allocator实例化：你之前的代码中遗漏了allocator的创建，必须先实例化Allocator才能传给Node的构造函数。

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