Unable to use zustand in vanilla project

[trigun539]

I'm getting following error when in a vanilla app:

Cannot read properties of null (reading 'useRef')
TypeError: Cannot read properties of null (reading 'useRef')
    at useRef (webpack://simple/./node_modules/react/cjs/react.development.js?:1631:21)
    at useSyncExternalStoreWithSelector (webpack://simple/./node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js?:51:17)
    at useStore (webpack://simple/./node_modules/zustand/esm/index.mjs?:27:17)
    at SettingsButton (webpack://simple/./src/components/SettingsButton.ts?:14:86)

Store File:

import { createStore } from 'zustand/vanilla'

interface SettingsState {
  clicked: boolean
  setClicked: (clicked: boolean) => void
}

const useSettingsStore = createStore<SettingsState>((set) => ({
  clicked: false,
  setClicked: (clicked: boolean) => set({ clicked }),
}))

export default useSettingsStore

Usage in other file:

import * as PIXI from 'pixi.js'
import { Button } from '@pixi/ui'
import { useStore } from 'zustand'
import SettingsStore from '../stores/settings-store'

const SettingsButton = () => {
  const { clicked, setClicked } = useStore(SettingsStore)

  return new Button()
}

[dbritto-dev]

@trigun539 useStore is a zustand feature for react

[trigun539]

@dbritto-dev the docs say I can use it that way. Is there some other way for a vanilla project?

Haven't been able to find other docs for vanilla setup. I'm on version 4.5.0

[dbritto-dev]

@trigun539 the docs point that you can use a vanilla store in react using the useStore hook. Don't forget that the hook thing is often related to react stuff

[dbritto-dev]

@trigun539 you can use a vanilla store directly from the store

[trigun539]

ok, I'll try that out. Thanks!