Zustand not working with webpack module federation #1881
-
|
I want to preface this with, I think I am doing things the correct way here, but please do tell me if I'm being stupid :) Here is the context:
In the host app I have the following config: const moduleFederationPlugin = new ModuleFederationPlugin({
name: 'ui',
filename: 'remoteEntry.js',
remotes: {
remoteApp: `promise import("http://localhost:5001/assets/remoteEntry.js")`,
},
shared: {
react: {
singleton: true,
requiredVersion: deps.react,
},
'react-dom': {
singleton: true,
requiredVersion: deps['react-dom'],
}
},
})And then in the remote app I have: federation({
name: "remoteApp",
filename: "remoteEntry.js",
exposes: {
"./Button": "./src/Button.jsx",
},
shared: {
react: {
requiredVersion: deps.react,
},
"react-dom": {
requiredVersion: deps["react-dom"],
}
},
}),Then I have the Button.jsx component that makes use of the basic bear demo in the readme of the Zustand github page: Button.jsx import useBearStore from "~/store/bear"
export const Button = () => {
function BearCounter() {
const bears = useBearStore((state) => state.bears)
return <h1>{bears} around here ...</h1>
}
function Controls() {
const increasePopulation = useBearStore((state) => state.increasePopulation)
return <button onClick={increasePopulation}>one up</button>
}
return (
<div>
<BearCounter />
<Controls />
</div>
)
}
export default ButtonAnd for completion the store simply looks like this: ~/store/bear.js import { create } from "zustand"
const useBearStore = create((set) => ({
bears: 0,
increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
removeAllBears: () => set({ bears: 0 }),
}))
export default useBearStoreAs soon as I import this Button component in the host app, I see this error: Please can someone help! 🙏 I've been working on this for days! I've also tried using the |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 11 replies
-
|
@olliepotter on shared deps you need to import -> https://github.com/facebook/react/tree/main/packages/use-sync-external-store |
Beta Was this translation helpful? Give feedback.
-
|
@dbritto-dev thankyou for the suggestion but unfortunately that didn't work. I installed the package like this in both host and remote: Then in host I added it to shared dependencies: ...
shared: {
react: {
singleton: true,
eager: true,
requiredVersion: deps.react,
},
'react-dom': {
singleton: true,
eager: true,
requiredVersion: deps['react-dom'],
},
'use-sync-external-store': {
requiredVersion: deps['use-sync-external-store']
}
},And then did the same in the remote: ...
shared: {
react: {
requiredVersion: deps.react,
},
"react-dom": {
requiredVersion: deps["react-dom"],
},
"use-sync-external-store": {
requiredVersion: deps["use-sync-external-store"],
},
},And I'm still seeing: Have I done this correctly? |
Beta Was this translation helpful? Give feedback.
-
|
@olliepotter interesting, that error is coming from Here you go: https://github.com/dai-shi/use-zustandp Keep me in the loop |
Beta Was this translation helpful? Give feedback.
-
|
I will give it a try, thankyou! I note this package says that it suffers from tearing, what is that? |
Beta Was this translation helpful? Give feedback.
-
@olliepotter here you go reactwg/react-18#69 BTW, you could try with your previous config without |
Beta Was this translation helpful? Give feedback.
-
|
Tried without |
Beta Was this translation helpful? Give feedback.
-
|
@olliepotter let me know how that goes with |
Beta Was this translation helpful? Give feedback.
@olliepotter interesting, that error is coming from
use-sync-external-store. A workaround for that could be usezustand/vanillaanduseZustandthat doesn't useuse-sync-external-storepackageHere you go: https://github.com/dai-shi/use-zustandp
Keep me in the loop