Webpack Module Federation微前端React-Redux上下文缺失问题求助

核心原因 #

宿主应用与集成Redux的微前端可能加载了多个react-redux实例，导致微前端的Redux钩子（如useSelector、useDispatch）无法找到匹配的<Provider>上下文；或者微前端的组件未被正确的<Provider>包裹。

具体修复步骤 #

1. 配置Webpack Federation共享依赖为单实例 #

在宿主和所有微前端的webpack.config.js中，更新ModuleFederationPlugin的shared配置，强制react、react-redux等依赖为单实例共享：

const packageJson = require('./package.json');

new webpack.container.ModuleFederationPlugin({
  // 其他配置（name、remotes等）
  shared: {
    react: {
      eager: true,
      singleton: true,
      requiredVersion: packageJson.dependencies['react']
    },
    'react-dom': {
      eager: true,
      singleton: true,
      requiredVersion: packageJson.dependencies['react-dom']
    },
    'react-redux': {
      eager: true,
      singleton: true,
      requiredVersion: packageJson.dependencies['react-redux']
    },
    '@reduxjs/toolkit': {
      eager: true,
      singleton: true,
      requiredVersion: packageJson.dependencies['@reduxjs/toolkit']
    }
  }
})

• singleton: true：确保整个应用中只有一个依赖实例，避免上下文不匹配。
• eager: true：在初始化时就加载共享依赖，防止异步加载导致的实例不一致。

2. 确保微前端组件被<Provider>正确包裹 #

根据你的场景选择以下两种方案之一：

方案A：微前端独立维护自己的Redux Store

在微前端的路由配置外层包裹自身的<Provider>：

// shop/Router.js 示例
import { Provider } from 'react-redux';
import { store } from './store';
import ShopHome from './pages/ShopHome';

export default [
  {
    path: '/shop',
    element: (
      <Provider store={store}>
        <ShopHome />
      </Provider>
    )
  }
];

方案B：共享宿主应用的Redux Store

在宿主应用的根组件（App.jsx）外层包裹全局<Provider>，微前端直接使用宿主的上下文：

// 宿主App.jsx
import { Provider } from 'react-redux';
import { store } from './store';
import { Outlet } from 'react-router-dom';

function App() {
  return (
    <Provider store={store}>
      {/* 宿主自身组件 */}
      <Outlet /> {/* 微前端路由出口 */}
    </Provider>
  );
}

此时微前端无需再单独配置<Provider>，直接使用useSelector/useDispatch即可。

3. 清除缓存并重启服务 #

Webpack缓存可能导致依赖未正确共享，执行以下操作：

• 清除项目根目录下的node_modules/.cache文件夹
• 重启宿主和微前端的开发服务器

4. 统一依赖版本 #

确保宿主和所有微前端的react、react-redux、@reduxjs/toolkit版本完全一致，避免版本不兼容引发的实例问题。

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