Argument of type 'StateCreator<..., [], [["zustand/devtools", never], ["zustand/persist", ...]]>' is not assignable to parameter of type 'StateCreator<..., [], [never, unknown][]>'.

[keduong33]

Hi everyone,

I was implementing Zustand to my new project but I could not get it to work (including the example given by the documents). It gives me this error (I took out devtools to make it a bit easier to read):

Argument of type 'StateCreator<BearState, [], [["zustand/persist", BearState]]>' is not assignable to parameter of type 'StateCreator<BearState, [], [never, unknown][]>'.
  Type 'StateCreator<BearState, [], [["zustand/persist", BearState]]>' is not assignable to type '{ $$storeMutators?: [never, unknown][] | undefined; }'.
    Types of property '$$storeMutators' are incompatible.
      Type '[["zustand/persist", BearState]] | undefined' is not assignable to type '[never, unknown][] | undefined'.
        Type '[["zustand/persist", BearState]]' is not assignable to type '[never, unknown][]'.
          Type '["zustand/persist", BearState]' is not assignable to type '[never, unknown]'.

The code I tried to implement:

const useBearStore2 = create<BearState>()(
    persist(
      (set) => ({
        bears: 0,
        increase: (by) => set((state) => ({ bears: state.bears + by })),
      }),
      { name: "bearStore" }
  )
);

---

I tried another method without workaround docs

const useBearStore = create<BearState, [["zustand/persist", BearState]]>(
  persist(
    (set) => ({
      bears: 0,
      increase: (by) => set((state) => ({ bears: state.bears + by })),
    }),
    { name: "bearStore" }
  )
);

It gave me this error:

Type '[["zustand/persist", BearState]]' does not satisfy the constraint '[never, unknown][]'.
  Type '["zustand/persist", BearState]' 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)

---

I could not replicate the issue on TS playground: link

---

This is my repo: link

Step to reproduce:

git clone https://github.com/keduong33/zustand-error.git
npm install
Go to Bear.store.ts, the stores should be all underlined red.

[keduong33]

I digged a bit more but I found another similar problem: #2164 --> Potential duplicates

[nfnfgo]

I think i has the similar problem

and I tried to completely copy the code from the offical doc

import { create } from 'zustand'
import { immer } from 'zustand/middleware/immer'

type State = {
    count: number
}

type Actions = {
    increment: (qty: number) => void
    decrement: (qty: number) => void
}

export const useCountStore = create<State & Actions>()(
    immer((set) => ({
        count: 0,
        increment: (qty: number) =>
            set((state) => {
                state.count += qty
            }),
        decrement: (qty: number) =>
            set((state) => {
                state.count -= qty
            }),
    }))
)

But typescript complains there is an error

[nfnfgo]

I also use the same pattern (zustand + immer middleware) in my previous project, and i found the older project doesn't have this issue, so I guess maybe it's a issue in newer version of zustand or sth else

[pablohaller]

Hey! I think it might be a problem with VSCode, or with the configuration from tsconfig, or eslint, a NextJS config, I don't know.
If you do a // @ts-nocheck it will probably work right away, so keep it in mind, don't let that problem distract you!
I'm trying to find a solution for that too!

[dbritto-dev]

Hey peeps, there's a fix for that #2170. BTW, would you mind trying the local instructions (https://ci.codesandbox.io/status/pmndrs/zustand/pr/2170/builds/434064)?

[keduong33]

Yup following the local instructions fixed my problem. In case anyone missed it: npm i https://pkg.csb.dev/pmndrs/zustand/commit/992cedd4/zustand. I think #2170 has more info on what is going on.

[code1379]

Thank you very much! It worked after I ran npm i https://pkg.csb.dev/pmndrs/zustand/commit/992cedd4/zustand.
installed zustand version 4.4.5, then upgraded it.
Now, there are no more TypeScript errors. I'm not sure why it worked, but it did!

[mrbeardad]

Still have this problem

[dbritto-dev]

@mrbeardad would you mind sharing us a ts playground?

[keduong33]

Hey did you mean to reply to the other person cause we resolved this a while ago? @dbritto-dev

[dbritto-dev]

@keduong33 my bad, was the autocomplete hehe

[mrbeardad]

@dbritto-dev Maybe it's because my node version is too low, it works good on my home pc, ignore the issue.