Module federation in Monorepo using vite apps(react apps with vite module bundler and turborepo build tool)

[naveenkurma]

Summary

• I am trying module federation between two vite react apps.
• One is the host and another one is the remote and I have implemented store(redux) in shared ui folder.
• I have used counterSlice in my remote app then I have exposed my entire App.tsx and I have added it as a remotes to the host app.

This error in only occuring, if I use store in the exposed component.

Additional information

But I getting error as below mentioned in the browser console.
 
TypeError: useReduxContext2() is null
    useSelector2 __federation_expose_App-m8EwzmRW.js:1847
    useStore __federation_expose_App-m8EwzmRW.js:2096
    App __federation_expose_App-m8EwzmRW.js:2111
    React 11
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    scheduler chunk-EXLHDAIY.js:403
    scheduler chunk-EXLHDAIY.js:451
    __require chunk-X6JW2M6M.js:3
    scheduler chunk-EXLHDAIY.js:463
    __require chunk-X6JW2M6M.js:3
    React 2
    __require chunk-X6JW2M6M.js:3
    dom React
    __require chunk-X6JW2M6M.js:3
    dom React
    __require chunk-X6JW2M6M.js:3
    <anonymous> react-dom_client.js:37

The above error occurred in the <App> component:

App@http://localhost:3001/assets/__federation_expose_App-m8EwzmRW.js:2111:32
App@http://localhost:3002/src/App.tsx:22:39

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

-> This is my remote vite.config.ts file

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import federation from "@originjs/vite-plugin-federation";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "remote",
      filename: "remoteEntry.js",
      exposes: {
        "./App": "./src/App.tsx",
      },
      shared: ["react", "react-dom"],
    }),
  ],
  build: {
    modulePreload: false,
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
  },
});

-> This is my host vite.config.ts file

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import federation from "@originjs/vite-plugin-federation";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "host",
      filename: "remoteEntry.js",
      remotes: {
        hello: "http://localhost:3001/assets/remoteEntry.js",
      },
      shared: ["react", "react-dom"],
    }),
  ],
  build: {
    modulePreload: false,
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
  },
});

Example

No response