Module Federation远程加载React组件时触发Invalid hook call错误的原因及解决方案

你遇到的这个错误在Module Federation整合React应用时非常常见，结合你的配置和场景，我来拆解可能的原因和对应的修复方案：

1. 最可能的诱因：宿主应用未配置React相关依赖的共享规则 #

从你的配置来看，远程应用已经把react、react-dom、react-redux设置为singleton: true（确保全局只有一份实例），但宿主应用的ModuleFederationPlugin完全没有配置shared选项！

这会导致：

• 宿主应用加载自己的React副本，远程应用加载自己的React副本（即使远程设置了singleton，宿主没同步配置的话，共享机制不生效）
• React Hooks依赖React内部的Dispatcher上下文，多份React实例会让钩子无法找到正确的上下文，直接抛出Invalid Hook Call错误

修复方案： #

给宿主应用的ModuleFederationPlugin添加shared配置，和远程保持一致的共享规则：

// 宿主应用配置
new ModuleFederationPlugin({
  name: 'Host',
  remotes: {
    myApp: 'RemoteMap@http://localhost:8081/Remote.js'
  },
  // 新增shared配置，和远程对齐
  shared: {
    "react": { eager: true, singleton: true, strictVersion: true, requiredVersion: dependencies.react },
    "react-redux": { eager: true, singleton: true },
    'react-dom': { eager: true, singleton: true }
  }
})

注意：确保宿主和远程应用的package.json里react、react-dom的版本完全一致（或者至少满足requiredVersion的范围），否则strictVersion: true会导致共享失败。

2. 版本不匹配问题（需验证） #

虽然你在远程配置里指定了strictVersion: true和requiredVersion，但如果宿主应用的React版本和远程不一致，即使配置了shared，Webpack也会拒绝共享，从而生成多份副本。

修复方案： #

• 检查宿主和远程的package.json，确保react、react-dom的版本完全相同
• 如果需要兼容小版本差异，可以把strictVersion改为false，但尽量保持版本一致避免潜在问题

3. 排除Hook使用规则问题（可能性低） #

因为你的远程组件单独运行正常，说明Hook使用本身没问题，但还是可以快速排查：

• 确认远程组件是函数组件，不是类组件
• 确认useState是在组件顶层调用的，没有嵌套在循环、条件判断或者普通函数里
• 确认没有把组件作为普通函数调用（比如const Counter = RemoteCounter()而不是<RemoteCounter />）

额外验证步骤 #

修复后可以通过以下方式确认是否只有一份React实例：

• 在宿主应用控制台执行window.React，再在远程组件的代码里打印React，看两者是否指向同一个引用
• 查看浏览器的Network面板，确认只加载了一份react.production.min.js（或开发版）

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