Zustand store doesn't work when putting to external package

[roman-rookout]

Hi everyone. We have a set of different webViews, they are all independent react apps that can have a shared codebase, but run in an isolated manner. We started to build a lerna monorepo repository and split the codebase into different reusable packages.
We have multiple reusable infra zustand stores that will be placed in the shared package and be imported from different applications. Here, we encounter issues. After moving the store into the package, the app stopped loading. I built a test repo to reproduce the issue from the clean repository.

I have a package with a store:
const useTestStore = create<Store>((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
}));

I'm using it in the main component then
function App() {
const { count, increment, decrement } = useTestStore();
...
<p>{count}</p>
<button onClick={() => increment()}>
Increment
</button>

What I see is a warning about InvalidHooks usage outside of react component which is weird and "TypeError: Cannot read properties of null (reading 'useRef')".
It points to the row - const { count, increment, decrement } = useTestStore();

So any usage of hook will fail also useTestStore((state) => state.count)
Only "non hook" method like useTestStore.getState().count will work.
Would appreciate for any input. Maybe we should reconsider the way we bundle the library, we are using Vite.

The PoC repo is here:
https://github.com/roman-rookout/zustand-package-test

[dai-shi]

You might have more than one copy of React in the same app

It sounds like it's that case.

[roman-rookout]

That is why I tried to isolate the issue in a clean repo to reproduce. I have peer dependency only in the library/package and only one reference to react and zustand from the application itself. I've been playing with bundling for ages, to make sure I don't have duplicate version of packages. Also here is the output of npm list react which shows I am not referencing anything excessive

[roman-rookout]

I couldn't find on the internet much useful information about usage zustand in monorepo in a shared package, seemed to me like it would've been a pretty common solution

[roman-rookout]

I updated vite.config with additional resolvers. Weirdly it changed the error to Uncaught TypeError: Cannot read properties of null (reading 'useSyncExternalStore')

The thing is, it is a very clean repository with minimum things that could've caused a wrong reaction, and I don't see any duplication in the node_modules folder or npm list.

[roman-rookout]

Also tried to installuse-sync-external-store, didn't help even after playing with adding alias in vite

[Trung-Pham-Modec]

I have the same issue, @roman-rookout Did you find the fix for this issue?