TypeError: dispatcher.useSyncExternalStore is not a function

[differentMonster]

TypeError: dispatcher.useSyncExternalStore is not a function

  19 |     const categorySlug = query.categorySlug
  20 | 
> 21 |     const addToCart = useCart((state) => state.addToCar
```t)

i am having this error when using zustand in component, how to fix this ? i am on nextjs, with react 18.1 package, being looking into website for this problem, but there is so less infomation about it.

[dai-shi]

That sounds very weird. Can you double check if it's using react-dom>=18? You might want to create a nextjs app with zustand from scratch, which should work, and then you add things until you get the same error.

[dai-shi]

If you have further questions, please open a new discussion.

[feuersteiner]

hi, same thing is happening to me on react 18.2.

I am calling the store in a controller ts file, then calling the controller in a tsx view.

This worked perfectly when the view is a pure react component, but now the error happens while using the canvas (using react-babylon, the react implementation of babylonjs)

here's the error happening :

[tuoxiansp]

Met the same problem while using react-pixi-fiber.

[tuoxiansp]

Met the same problem while using react-pixi-fiber.

Resolved: just upgrade the version of the react-reconciler from 0.26.2 to 0.29 .

Seems like React will use useSyncExternalStore from reconciler, but the old version of reconciler does not contain the useSyncExternalStore .

Also I noticed that zustand was using a shim for useSyncExternalStore. I guess it doesn't work on the environment that contains both old and new versions of reconciler.

[feuersteiner]

thanks for the update @tuoxiansp

the root of the issue from my side is how react-babylon-js handles its internal component state (because it is not a purely react component, it is coupled with babylonjs).

my fix was simply to list the state higher up to the Babylon component, and passing the changes as props inside that component, it solved it for me.

example:

instead of :

state = useStore(someState)

return <Model props={state} />

it became :

state = useStore(someState)

return <BabylonJS>
 <Model props={state} />
</BabylonJS>

hope it helps

[kresli]

Met the same problem while using react-pixi-fiber.

Resolved: just upgrade the version of the react-reconciler from 0.26.2 to 0.29 .

Seems like React will use useSyncExternalStore from reconciler, but the old version of reconciler does not contain the useSyncExternalStore .

Also I noticed that zustand was using a shim for useSyncExternalStore. I guess it doesn't work on the environment that contains both old and new versions of reconciler.

Same issue for me with react-pixi-fiber but above doesn't fixed the issue for me

[ekologic]

Met the same problem while using react-pixi-fiber.

Resolved: just upgrade the version of the react-reconciler from 0.26.2 to 0.29 . Seems like React will use useSyncExternalStore from reconciler, but the old version of reconciler does not contain the useSyncExternalStore . Also I noticed that zustand was using a shim for useSyncExternalStore. I guess it doesn't work on the environment that contains both old and new versions of reconciler.

Same issue for me with react-pixi-fiber but above doesn't fixed the issue for me

Hitting the same issue here, were you able to fix this?

[dai-shi]

Downgrading to React 17 would probably fix. (until react-pixi-fiber supports React 18)

[SrBrahma]

@michalochman care to check this? I am also having this issue when accessing a Zustand store inside a component that is inside a <Stage/>.

EDIT: I downgraded React from 18 to 17 and it now works. I know there is that new alternative to react-pixi-fiber but I have issues with it.

[NumanAnees]

I am facing the same issue.

dependencies:

  "react": "^18.2.0",
  "react-dom": "^18.2.0"

[ovoloshchenko]

thanks for the update @tuoxiansp

the root of the issue from my side is how react-babylon-js handles its internal component state (because it is not a purely react component, it is coupled with babylonjs).

my fix was simply to list the state higher up to the Babylon component, and passing the changes as props inside that component, it solved it for me.

example:

instead of :

state = useStore(someState)

return <Model props={state} />

it became :

state = useStore(someState)

return <BabylonJS>
 <Model props={state} />
</BabylonJS>

hope it helps

for anyone out here in August 2024 - this is the solution that worked for me for me this issue was happening while using react-pdf library thank you @feuersteiner !