Webpack5 Module Federation下react-redux找不到Provider上下文问题咨询

问题根本原因 #

这个报错是远程应用和宿主应用使用了不同的react-redux实例导致的：react-redux的Provider基于React Context实现，不同实例的Context完全独立，宿主Provider注入的store无法被另一个react-redux实例识别。
出现多实例的常见原因是Webpack Module Federation没有配置公共依赖单例共享，远程应用打包时把react-redux打进了自身的bundle里。

解决方案 #

1. 配置Module Federation共享依赖

在宿主应用ui-platform和远程应用image-ui的Webpack配置中，给ModuleFederationPlugin的shared字段添加公共依赖，强制所有应用使用同一个实例：

// webpack.config.js 宿主和远程都要加
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // 其他原有配置保持不变
  plugins: [
    new ModuleFederationPlugin({
      // 你原有配置的name、filename、exposes/remotes字段保持不变
      shared: {
        react: { 
          singleton: true, 
          requiredVersion: '替换为你的项目实际react版本号，比如^18.2.0' 
        },
        'react-dom': { 
          singleton: true, 
          requiredVersion: '替换为你的项目实际react-dom版本号' 
        },
        'react-redux': { 
          singleton: true, 
          requiredVersion: '替换为你的项目实际react-redux版本号' 
        },
        redux: { 
          singleton: true, 
          requiredVersion: '替换为你的项目实际redux版本号' 
        },
        'redux-saga': { 
          singleton: true, 
          requiredVersion: '替换为你的项目实际redux-saga版本号' 
        }
      }
    })
  ]
}

注意：宿主和远程的上述依赖版本尽量保持完全一致，避免出现版本不兼容警告。

2. 检查远程应用打包配置

不要在远程应用的externals配置里排除react-redux相关依赖，也不要配置单独的splitChunks规则打包这些公共依赖，让它们统一从宿主的共享模块加载即可。

3. 验证渲染位置

确认远程组件RemoteWrapper是在宿主Provider的组件树内部渲染，不要渲染到Provider外的DOM节点（比如使用createPortal挂载时要注意节点位置）；如果用React.lazy加载，确保Suspense组件也包裹在Provider内部。

验证方法 #

你可以分别在宿主和远程的代码里打印ReactRedux.Context，如果配置正确，两个打印的结果应该完全相同，此时远程组件不需要单独加Provider就可以正常读取宿主的store。

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