TypeError: dispatcher.useSyncExternalStore is not a function

See original GitHub issue

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.

Issue Analytics

State:
Created a year ago
Comments:7 (2 by maintainers)

Top GitHub Comments

1reaction

feuersteinercommented, Nov 10, 2022

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

0reactions

kreslicommented, Dec 9, 2022

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