I'm trying to use Zustand's persist middleware to store and retrieve state in my React application. However, I'm encountering a TypeScript error that I'm struggling to resolve. The error message is as follows:

Argument of type 'StateCreator<ForestStore, [], [["zustand/persist", ForestStore]]>' is not assignable to parameter of type 'StateCreator<ForestStore, [], []>'.
Type 'StateCreator<ForestStore, [], [["zustand/persist", ForestStore]]>' is not assignable to type '{ $$storeMutators?: [] | undefined; }'.
Types of property '$$storeMutators' are inpatible.
Type '[["zustand/persist", ForestStore]] | undefined' is not assignable to type '[] | undefined'.
Type '[["zustand/persist", ForestStore]]' is not assignable to type '[]'.
Source has 1 element(s) but target allows only 0.ts(2345)

Here is my code:

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

export type Forest = "poetry" | "prose" | "script";
export interface ForestStore {
  forest: Forest;
  setForest: (forest: Forest) => void;
}

const forestPersist = persist<ForestStore>(
    (set) => ({
        forest: "poetry",
        setForest: (newForest) => set(() => ({forest: newForest})),
    }),
    {
        name: "forest-storage",
        storage: createJSONStorage(() => sessionStorage),
    }
);



export const useForestStore = create<ForestStore>(forestPersist);

I really don't know how to solve it the code works as intended but the types are messing around.

Thanks you very much in advance

I'm trying to use Zustand's persist middleware to store and retrieve state in my React application. However, I'm encountering a TypeScript error that I'm struggling to resolve. The error message is as follows:

Argument of type 'StateCreator<ForestStore, [], [["zustand/persist", ForestStore]]>' is not assignable to parameter of type 'StateCreator<ForestStore, [], []>'.
Type 'StateCreator<ForestStore, [], [["zustand/persist", ForestStore]]>' is not assignable to type '{ $$storeMutators?: [] | undefined; }'.
Types of property '$$storeMutators' are inpatible.
Type '[["zustand/persist", ForestStore]] | undefined' is not assignable to type '[] | undefined'.
Type '[["zustand/persist", ForestStore]]' is not assignable to type '[]'.
Source has 1 element(s) but target allows only 0.ts(2345)

Here is my code:

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

export type Forest = "poetry" | "prose" | "script";
export interface ForestStore {
  forest: Forest;
  setForest: (forest: Forest) => void;
}

const forestPersist = persist<ForestStore>(
    (set) => ({
        forest: "poetry",
        setForest: (newForest) => set(() => ({forest: newForest})),
    }),
    {
        name: "forest-storage",
        storage: createJSONStorage(() => sessionStorage),
    }
);



export const useForestStore = create<ForestStore>(forestPersist);

I really don't know how to solve it the code works as intended but the types are messing around.

Thanks you very much in advance

• javascript
• reactjs
• typescript
• zustand

• 1 Add () after create like this: const useForestStore = create<ForestStore>()(forestPersist). This will fix the type issue – Muhammad Nouman Rafique Commented Jul 22, 2023 at 15:01

2 Answers 2

Write it in this way

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

export type Forest = "poetry" | "prose" | "script";
export interface ForestStore {
  forest: Forest;
  setForest: (forest: Forest) => void;
}

const forestSlice: StateCreator<ForestStore, [["zustand/persist", unknown]]> = (
  set
) => ({
  forest: "poetry",
  setForest: (newForest) => set(() => ({ forest: newForest })),
});

export const useForestStore = create<ForestStore>()(
  persist(forestSlice, {
    name: "forest-storage",
    storage: createJSONStorage(() => sessionStorage),
  })
);

If you have more middlewares like devtools, immer and subscribeWithSelector, you can take a look at my video, the code in this video is tested:

https://youtu.be/kTwx9NhMlzs

Like Muhammad Nouman Rafique said:

Add () after create like this: const useForestStore = create()(forestPersist). This will fix the type issue