dumi中使用webpack5联邦模块遇到的问题

问题 1：Error: Shared module is not available for eager consumption

现象

在基于 Dumi 构建的 React 微前端子应用中，启用 Webpack Module Federation 后，应用启动时抛出如下运行时错误：

Error: Shared module is not available for eager consumption

原因

• Webpack Module Federation 默认将 shared 模块配置为 懒加载（eager: false） 。
• 这是因为同步导入属于“急切消费（eager consumption）”，但共享模块还未准备好。

解决方案

将应用的启动逻辑包裹在动态 import 中，延迟执行，确保 Module Federation 先完成初始化 此方式可确保共享模块先由联邦系统加载完成，再执行依赖它们的代码。

问题 2：未设置 singleton: true 导致多个 React 实例共存

现象

微前端架构中，主应用与子应用各自加载了自己的 React 实例

原因

在 Module Federation 的 shared 配置中，未启用 singleton: true，导致每个微应用独立加载并持有自己的 react 和 react-dom 模块副本，破坏 React 的内部一致性。

解决方案

在主应用和所有子应用的 Module Federation 配置中，对关键库（如 React）显式启用单例模式：

// webpack / federation 配置示例
shared: {
  react: {
    singleton: true,
    requiredVersion: '^18.0.0',
  },
  'react-dom': {
    singleton: true,
    requiredVersion: '^18.0.0',
  },
}

说明

• singleton: true：强制整个微前端体系中只存在一个 React 实例。
• requiredVersion：建议指定版本范围，避免主/子应用使用不兼容的 React 版本。