Persist + Typescript + Slices type errors

[pablohaller]

Hey guys!
I'm trying to setup a whole new store, and I've been suffering a lot with the types.
I haven't moved from the examples on the web, looking for a minimal setup example to replicate.
Here's my code so far:

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

interface BearSlice {
  bears: number;
  addBear: () => void;
  eatFish: () => void;
}

interface FishSlice {
  fishes: number;
  addFish: () => void;
}

interface SharedSlice {
  addBoth: () => void;
  getBoth: () => void;
}

const createBearSlice: StateCreator<
  BearSlice & FishSlice,
  [["zustand/persist", unknown]],
  [],
  BearSlice
> = (set) => ({
  bears: 0,
  addBear: () => set((state) => ({ bears: state.bears + 1 })),
  eatFish: () => set((state) => ({ fishes: state.fishes - 1 })),
});

const createFishSlice: StateCreator<
  BearSlice & FishSlice,
  [["zustand/persist", unknown]],
  [],
  FishSlice
> = (set) => ({
  fishes: 0,
  addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
});

const createSharedSlice: StateCreator<
  BearSlice & FishSlice,
  [["zustand/persist", unknown]],
  [],
  SharedSlice
> = (set, get) => ({
  addBoth: () => {
    // you can reuse previous methods
    get().addBear();
    get().addFish();
    // or do them from scratch
    // set((state) => ({ bears: state.bears + 1, fishes: state.fishes + 1 })
  },
  getBoth: () => get().bears + get().fishes,
});

const useBoundStore = create<BearSlice & FishSlice & SharedSlice>()(
  persist(
    (...a) => ({
      ...createBearSlice(...a),
      ...createFishSlice(...a),
      ...createSharedSlice(...a),
    }),
    {
      name: "GBGStore",
    }
  )
);

I'm getting this for each one of the slices:

Type '[["zustand/persist", unknown]]' does not satisfy the constraint '[never, unknown][]'.
  Type '["zustand/persist", unknown]' is not assignable to type '[never, unknown]'.
    Type at position 0 in source is not compatible with type at position 0 in target.
      Type 'string' is not assignable to type 'never'.

And this for persist function.

Argument of type 'StateCreator<BearSlice & FishSlice & SharedSlice, [], [["zustand/persist", BearSlice & FishSlice & SharedSlice]]>' is not assignable to parameter of type 'StateCreator<BearSlice & FishSlice & SharedSlice, [], [never, unknown][]>'.
  Type 'StateCreator<BearSlice & FishSlice & SharedSlice, [], [["zustand/persist", BearSlice & FishSlice & SharedSlice]]>' is not assignable to type '{ $$storeMutators?: [never, unknown][] | undefined; }'.
    Types of property '$$storeMutators' are incompatible.
      Type '[["zustand/persist", BearSlice & FishSlice & SharedSlice]] | undefined' is not assignable to type '[never, unknown][] | undefined'.
        Type '[["zustand/persist", BearSlice & FishSlice & SharedSlice]]' is not assignable to type '[never, unknown][]'.
          Type '["zustand/persist", BearSlice & FishSlice & SharedSlice]' is not assignable to type '[never, unknown]'.
            Type at position 0 in source is not compatible with type at position 0 in target.
              Type 'string' is not assignable to type 'never'.ts(2345)

Been struggling the whole day trying to test different solutions here and there but haven't come up with anything.
Thank you in advance!

[Michael0520]

me too

[dai-shi]

SharedState is missing: https://tsplay.dev/mqq0Jm

[pablohaller]

Hmmm exactly where, if you can tell me.
Just copied and pasted your code and now I'm getting the following:

Type '[["zustand/persist", unknown]]' does not satisfy the constraint '[never, unknown][]'.
  Type '["zustand/persist", unknown]' is not assignable to type '[never, unknown]'.
    Type at position 0 in source is not compatible with type at position 0 in target.
      Type 'string' is not assignable to type 'never'.ts(2344)

For persist:

rgument of type 'StateCreator<BearSlice & FishSlice & SharedSlice, [], [["zustand/persist", BearSlice & FishSlice & SharedSlice]]>' is not assignable to parameter of type 'StateCreator<BearSlice & FishSlice & SharedSlice, [], [never, unknown][]>'.
  Type 'StateCreator<BearSlice & FishSlice & SharedSlice, [], [["zustand/persist", BearSlice & FishSlice & SharedSlice]]>' is not assignable to type '{ $$storeMutators?: [never, unknown][] | undefined; }'.
    Types of property '$$storeMutators' are incompatible.
      Type '[["zustand/persist", BearSlice & FishSlice & SharedSlice]] | undefined' is not assignable to type '[never, unknown][] | undefined'.
        Type '[["zustand/persist", BearSlice & FishSlice & SharedSlice]]' is not assignable to type '[never, unknown][]'.
          Type '["zustand/persist", BearSlice & FishSlice & SharedSlice]' is not assignable to type '[never, unknown]'.
            Type at position 0 in source is not compatible with type at position 0 in target.
              Type 'string' is not assignable to type 'never'.ts(2345)

For get/set

This expression is not callable.
  Type 'never' has no call signatures.

[dai-shi]

Can you reproduce it in TypeScript playground?

[pablohaller]

Hey @dai-shi !
Thanks for taking your time to answer.
Sadly, I wasn't able to reproduce it yet in TSPlayground.

Also, I used CodeSandbox to create a new TypeScript React project, and it worked just well!

Now I'm in doubt if its is some kind of misconfig with typescript by using create-next-app.

I'll keep looking that way for the moment; IDK if the .tsconfig file could help to see if something is messing around with Zustand.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

[pablohaller]

#2172 (comment)

Apparently this issue was related with the following fix/comment.

Thanks @dbritto-dev and @dai-shi !

[dai-shi]

See also #2163

[Wesley-Fernandes]

Hello my man, i fix this just passing the interface to persist until to create, like this:

SOLUTION:

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

interface userProps {
  token: string;
  thumb: string;
  name: string;
  id: string;
}

interface userStoreProps {
  user: userProps | null;
  setUser: (data: userProps) => void;
  removeUser: () => void;
}


export const userStore = create(
  devtools(
    persist<userStoreProps>(
      (set) => ({
        user: null,
        setUser: (newUser) => set((_state) => ({ user: newUser })),
        removeUser: () => set({ user: null }),
      }),
      {
        name: "auth",
        storage: createJSONStorage(() => sessionStorage),
      }
    )
  )
);

if you pass the interface/type on create, you will get that error.

[dai-shi]

We recommend this instead: https://tsplay.dev/mpoR7N

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

interface userProps {
  token: string;
  thumb: string;
  name: string;
  id: string;
}

interface userStoreProps {
  user: userProps | null;
  setUser: (data: userProps) => void;
  removeUser: () => void;
}


export const userStore = create<userStoreProps>()(
  devtools(
    persist(
      (set) => ({
        user: null,
        setUser: (newUser) => set((_state) => ({ user: newUser })),
        removeUser: () => set({ user: null }),
      }),
      {
        name: "auth",
        storage: createJSONStorage(() => sessionStorage),
      }
    )
  )
);

[Wesley-Fernandes]

Damn, you responded soon. What an honor to have you here.

[pablohaller]

It was an issue with the library itself for the specific version at that time, as marked in the answer.
Something with zustand types.

Thanks for taking your time answering.

[lucksp]

this is still the correct answer for me, using Zustand ^5.0.1

[TenviLi]

I am so touched. I was tormented by the type-check issue of create&persist&slice for over an hour, but seeing this answer instantly solved my problem. Thank you 🙏

[ProfNuru]

Error still exists in version 5+.
I used the createStore in zustand/vanilla as described here: https://zustand.docs.pmnd.rs/middlewares/persist
It worked for my purpose

[dbritto-dev]

@ProfNuru would you mind sharing us a minimal repro on stackblitz?

[ProfNuru]

https://stackblitz.com/edit/vitejs-vite-12slvwue?file=src%2Fstore%2Fuse-company-form.tsx

I simply created a store folder and dropped my zustand store hook in there.
The values can then be accessed in the following way as stated in the documentaton:
const {legalName, ...data} = useCompanyForm.getState();

[dbritto-dev]

https://stackblitz.com/edit/vitejs-vite-12slvwue?file=src%2Fstore%2Fuse-company-form.tsx

I simply created a store folder and dropped my zustand store hook in there.

The values can then be accessed in the following way as stated in the documentaton:

`

const {legalName, ...data} = useCompanyForm.getState();

`

@ProfNuru but that's wrong only create returns a custom hook, createStore returns a store

[ProfNuru]

Ahh! I see. I guess returning the store bypasses these type errors. None of the solutions above worked for me. So I refactored my code to work it this way