Sharing State between MonoRepo and MicroFrontEnd

24 Views Asked by At

I am tring to share state between MonoRepo and MicroFrontEnd application (hosted on different domain)

In the MonoRepo application, created below store and exposed visa module federation

import { create } from 'zustand';

type Store = {
  count: number;
  increment: () => void;
};

const useStore = create<Store>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

export default useStore;

// Module Federation Part.
 new ModuleFederationPlugin({
      name: 'parent',
      filename: 'remoteEntry.js',
      remotes: {
        host: `host@http://localhost:4002/remoteEntry.js`,
      },
      exposes:{
         "./store": "./src/store",
      }
    }),

Now in the receiving MFE, I added the remotes in Module Federation

      name: "host",
      filename: "remoteEntry.js",
      remotes: {
        parent: `parent@http://localhost:4200/remoteEntry.js`,
      },
      exposes: {
        "./Header": "./src/Header",
        "./Counter": "./src/Counter",
      }
    }),

and accessed like 

import useStore from "parent/store";

But this line throws error

fn is not a function
while loading "./store" from webpack/container/reference/parent
TypeError: fn is not a function
while loading "./store" from webpack/container/reference/parent

this loads the remoteEntry properly.

http://localhost:4200/remoteEntry.js

What could be the issue, any help is appreciated.

Thanks.
0

There are 0 best solutions below