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?

There is issue in accessing to store in your micro project.

Farzaneh Torkpichlou
– Farzaneh Torkpichlou

2021-12-12 07:35:51 +00:00
Commented Dec 12, 2021 at 7:35 — Farzaneh Torkpichlou
– Farzaneh Torkpichlou, Commented Dec 12, 2021 at 7:35

amjns · Accepted Answer · 2022-08-08 16:28:01Z

4

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.

answered Aug 8, 2022 at 16:28

amjns

412 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dror Bar Over a year ago

This didn't fix the issue for me. In the remote app, I'm wrapping _app with <Provider> and it works fine. However, I can't expose _app directly but instead home page, which isn't directly wrapped with <Provider>. Then you get this error.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related