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.