Webpack5 Module Federation: “Uncaught Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>”

Question

I'm working on a micro-frontend project based on React js, Redux-Saga, and Webpack 5 Module Federation. There is a "ui-platform" project as a host and "image-ui" as a remote app.

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;

I'm getting following error:

While there is a Provider tag in the ui-platform project as you can see in the error. If I wrap ImagePage in Provider, the error will be fixed but it must work well without provider tag in image-remote.

Could you please share your experience with me?

Answer 1

I had a similar issue and I solved it by updating the shared key in the webpack.config of both host and microfrontend app:

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
            },
        },
    }),

Don't forget to add "react-redux" (and any other shared dependency) in BOTH webpack.config files.