嵌套循环Module Federation场景下重复React实例报错如何解决

场景支持性说明 #

Webpack Module Federation原生支持双向循环依赖的联邦模块调用，App1加载App2、App2再反向加载App1暴露组件的场景完全合法，不存在场景不兼容问题。

错误根因 #

你遇到的Hook报错是典型的共享依赖未正确复用导致的多React副本共存问题：App1作为宿主加载App2时，App2的配置未正确声明共享依赖规则，独立初始化了一份React副本，后续App2加载的App1组件使用的是App1侧的React单例，两个副本共存触发报错。
你测试的App2独立运行场景无异常，是因为此时App2作为宿主，本地React作为全局单例，加载App1组件时正确复用了该单例，因此无冲突。

修复步骤 #

• 1. 对齐共享依赖版本声明
     App2的shared配置需补充和App1一致的requiredVersion字段，且保证两个应用本地安装的react、react-dom、react-router-dom版本完全兼容（最好版本号完全一致），缺失该字段会导致MF无法判断版本匹配性，优先加载App2本地的依赖副本。
     修正后的App2 shared配置如下：

  shared: {
      react: {
          singleton: true,
          requiredVersion: deps.react,
      },
      'react-dom': {
          singleton: true,
          requiredVersion: deps['react-dom'],
      },
      'react-router-dom': {
          singleton: true,
          requiredVersion: deps['react-router-dom'],
      },
  }
  

• 2. 补全App2的远程依赖声明
     App2需要加载App1暴露的Component1，因此必须在MF配置中声明remotes指向App1的联邦入口，否则App2加载Component1时会识别不到对应远程容器，独立初始化上下文：

  new ModuleFederationPlugin({
      name: 'RemoteAppShell',
      filename: 'remoteEntry.js', // 注意原配置此处漏了引号
      exposes: {
          Shell: './core/App',
      },
      remotes: {
          HostApp: 'HostApp@<App1服务部署地址>/federatedEntry.js'
          // 如果是动态加载远程容器，可以用promise格式动态赋值
      },
      // 上述修正后的shared配置
  })
  

• 3. 调整动态加载时机
     你使用动态方式加载App2的远程容器，需保证加载动作在App1的共享依赖完全初始化后触发，建议将加载逻辑放在App1根组件的useEffect回调中执行，避免根组件渲染未完成时就加载远程容器导致上下文丢失。
• 4. 额外校验项
     可以将App2的react、react-dom、react-router-dom配置为webpack external，进一步避免构建时将这些依赖打包进App2的产物，彻底杜绝重复加载风险。

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