Exposed component cannot be wrapped with Redux provider when remote is consumed as dynamic remotes

[AshanPerera98]

I have two react apps running on the following stack

• node 20.17.0
• react 18.3.1
• webpack 5
• redux 5.0.1

• react-redux 9.1.2

  Here is the code in the shell app where I consume the dynamic remote

  import React, { Suspense, useState, useEffect } from "react"; import { init, loadRemote } from "@module-federation/runtime";

  init({ name: "app1", remotes: [ { name: "FITSample", entry: "http://localhost:3001/remoteEntry.js", }, ], });

  function useDynamicImport({ module, scope }) { const [component, setComponent] = useState(null);

  useEffect(() => { if (!module || !scope) return;

  const loadComponent = async () => {
    try {
      const { default: Component } = await loadRemote(`${scope}/${module}`);
      setComponent(() => Component);
    } catch (error) {
      console.error(`Error loading remote module ${scope}/${module}:`, error);
    }
  };
  
  loadComponent();

  }, [module, scope]);

  return component; }

  function App() { const [{ module, scope }, setSystem] = useState({});

  const setsample = () => { setSystem({ scope: "FITSample", module: "FITIntegrator", }); };

  const Component = useDynamicImport({ module, scope });

  return (

  Bridge

  Load Sample {Component ? : null}

  ); }

  export default App;

  Here is the remote app component that I exposed using module federation

  import React, { Component } from "react";

  import { Provider } from "react-redux"; import { CONSUMER_TYPES } from "./const/APP_DATA"; import storeConfigs from "./redux/store/Store"; import configAction from "./redux/action/configAction";

  class FITIntegrator extends Component { constructor(props) { super(props);

  storeConfigs.store.dispatch(
    configAction.setConsumerConfig(CONSUMER_TYPES.XL)
  );

  }

  render() { return ( <>

  Sample app

    </>
  );

  } }

  export default FITIntegrator;

---

When shell app tries to render the remote it gives the following errors in the console

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

AND

react.development.js:1650 Uncaught TypeError: Cannot read properties of null (reading 'useMemo')

When I remove the Provider and the Store config from the constructor it works fine.

This is the module-federation sample that I followed https://github.com/module-federation/module-federation-examples/blob/master/advanced-api/dynamic-remotes/app1/src/App.js

[ScriptedAlchemy]

Have you shared React and Redux, etc. as a singleton?