NextJS + Zustand + TypeScript type conflict with persist middleware

Aran Cloverink Chananar
2 min readJul 8, 2023

--

Just a short note for me again :)

Found some issues while building a project with NextJS and got type error on a persist function ( here is an example before )

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

type T = {
accessToken: string | null;
setAccessToken: (token: string) => void;
}

const useAuthStore = create<T>(
persist(
(set, get): T => ({
accessToken: null,
setAccessToken: (token) => set((state) => ({ accessToken: token })),
}),
{
name: 'auth',
storage: createJSONStorage(() => localStorage),
},
),
);

export default useAuthStore;

And I got this error on the build….

./src/state/useAuthStore.ts:10:3
Type error: Argument of type 'StateCreator<T, [], [["zustand/persist", unknown]]>' is not assignable to parameter of type 'StateCreator<T, [], []>'.
Type 'StateCreator<T, [], [["zustand/persist", unknown]]>' is not assignable to type '{ $$storeMutators?: [] | undefined; }'.
Types of property '$$storeMutators' are incompatible.
Type '[["zustand/persist", unknown]] | undefined' is not assignable to type '[] | undefined'.
Type '[["zustand/persist", unknown]]' is not assignable to type '[]'.
Source has 1 element(s) but target allows only 0.

And here is an example of a way to solve type on this

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

type AuthStore = {
accessToken: string | null;
setAccessToken: (token: string) => void;
}

type MyPersist = (
config: StateCreator<AuthStore>,
options: PersistOptions<AuthStore>
) => StateCreator<AuthStore>

const useAuthStore = create<AuthStore, []>(
(persist as MyPersist)(
(set, get): AuthStore => ({
accessToken: null,
setAccessToken: (token: string) => set((state) => ({ accessToken: token })),
}),
{
name: 'auth',
storage: createJSONStorage(() => localStorage),
},
),
);

export default useAuthStore;

Thx, dai-shi
ref: https://github.com/pmndrs/zustand/issues/650#issuecomment-965916156

--

--