Webpack5 模块联合：“未捕获的错误：找不到 react-redux 上下文值； 请确保组件被包裹在一个<provider> ”</provider>

Question

我正在开发一个基于 React js、Redux-Saga 和 Webpack 5 Module Federation 的微前端项目。 有一个“ui-platform”项目作为主机，“image-ui”作为远程应用程序。

image-ui > RemoteWrapper.js

import React from 'react';

import rootReducer from './redux/rootReducers';
import rootSaga from './redux/rootSaga';

const ImagePage = React.lazy(() => import('./pages'));

export const SCOPE = 'IMAGE';

const RemoteWrapper = (props) => {
  const { store } = props;

  store.injectModule(SCOPE, rootReducer, rootSaga);

  return <ImagePage />;
};
export default RemoteWrapper;

我收到以下错误：

正如您在错误中看到的那样，在 ui-platform 项目中有一个 Provider 标记。 如果我将 ImagePage 包装在 Provider 中，错误将得到修复，但它必须在 image-remote 中没有提供者标签的情况下正常工作。

你能和我分享你的经验吗？

Answer 1

我有一个类似的问题，我通过更新主机和微前端应用程序的 webpack.config 中的shared密钥来解决它：

import { dependencies } from './package.json';

/*...inside plugins: */

new webpack.container.ModuleFederationPlugin({
        name: 'host',
        remotes: /* your list of remotes */,
        shared: {
            'react-redux': {
                singleton: true,
                requiredVersion: dependencies['react-redux'], // eslint-disable-line @typescript-eslint/no-unsafe-assignment
            },
        },
    }),

不要忘记在 webpack.config 文件中添加“react-redux”（和任何其他共享依赖项）。