TypeScript: Unresolved variables when using persist

[tyler71]

• Occurring in zustand@4.4.6
• Working in zustand@4.1.3, introduced in zustand@4.1.4
• This is with JetBrains Webstorm 2023.2.3 (232.10072.28)

I will get this IDE error when trying to access variables: Unresolved variable darkMode
The code works fine, but it will show it as a TypeScript error.

const darkMode = useAppConfigStore(state => state.darkMode)

Code:

import {create} from "zustand";
import {createJSONStorage, persist} from "zustand/middleware";

type AppConfig = {
    [key: string]: any;
}

const initialConfig: AppConfig = {
    darkMode: false
}

interface AppConfigStore {
    darkMode: boolean
    toggleDarkMode: () => void
    resetAppConfig: () => void
}

const useAppConfigStore = create<AppConfigStore>()(
    persist(
        (set, get) => ({
            darkMode: false,
            toggleDarkMode: () => set(() => ({darkMode: !get().darkMode})),
            resetAppConfig: () => set(initialConfig),
        }),
        {
            name: 'config-storage',
            storage: createJSONStorage(() => localStorage)
        }
    ))
export default useAppConfigStore

Removing persist shows it working

const useAppConfigStore = create<AppConfigStore>()(
    // persist(
        (set, get) => ({
            darkMode: false,
            toggleDarkMode: () => set(() => ({darkMode: !get().darkMode})),
            resetAppConfig: () => set(initialConfig),
        }))
        // {
        //     name: 'config-storage',
        //     storage: createJSONStorage(() => localStorage)
        // }
    // ))
export default useAppConfigStor

[dai-shi]

Thanks for reporting.
https://github.com/pmndrs/zustand/releases/tag/v4.1.4
#1387 or #1393
I'm not sure but maybe you need a newer TS version.

[tyler71]

Thank you. This resolved the issue. It was on an old version of Node, so I installed to the latest version.

nvm install node