Type problem with persist

[nerkn]

Summary

Code I've written for 4.4.4 which is working very fine, gave typescript error on 4.4.5

argument of type 'StateCreator<useCartType, [], [["zustand/persist", useCartType]]>' is not assignable to parameter of type 'StateCreator<useCartType, [], [never, unknown][]>'. Type 'StateCreator<useCartType, [], [["zustand/persist", useCartType]]>' is not assignable to type '{ $$storeMutators?: [never, unknown][] | undefined; }'. Types of property '$$storeMutators' are incompatible. Type '[["zustand/persist", useCartType]] | undefined' is not assignable to type '[never, unknown][] | undefined'. Type '[["zustand/persist", useCartType]]' is not assignable to type '[never, unknown][]'. Type '["zustand/persist", useCartType]' 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'.

Link to reproduction

https://github.com/nerkn/ecommerce-Frontend/blob/main/src/hooks/useCart.ts

Check List

• I've already opened a discussion before opening this issue, or already discussed in other media.
  comment of muammed

https://stackoverflow.com/questions/77402109/zustand-and-typescript-persist-function-cannot-be-implemented

Please include a minimal reproduction.

• I've added a link to a typescript playground or codesandbox with a minimal reproduction.

Please check this if you're filing an issue regarding TypeScript.

• I've read the typescript guide, in particular that create is to be used as create<T>()(...) and not create<T>(...).

[jwindhager]

Can concur, experiencing the same issue with using the immer middleware ([email protected]) in v4.4.5. No problem with v4.4.4.

[alexanderhorner]

I was about to submit this on Tuesday but couldn't reproduce it. Since wednesday was holiday, I just got around to it. What a coincidence that you beat me by 39 minutes.

Here is my reproduction:
https://codesandbox.io/p/sandbox/vibrant-bash-prcf7q?file=%2Fsrc%2Fstore.ts%3A21%2C6

It only happens with "moduleResolution": "bundler", in tsconfig.

[eisa-rezaei]

I have the same issue

[dbritto-dev]

@nerkn @jwindhager @alexanderhorner @eisa-rezaei here's the fix -> #2170 you can show your love there hehe. BTW, if you can help us test out the changes using the local instructions would be good so @dai-shi can merge it as soon as possible

[alexanderhorner]

Already tested it. Fixed the issue for me!

[eisa-rezaei]

Issue fixed. 👀

[jwindhager]

Fixed, thanks so much!

[j3sch]

I have the same issue on zustand 4.4.7

[aaronfulkerson]

I'm also having this issue now with the following code on 4.5.5:

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

type State = {
  sourceRole: { id: number; sourceName: string; sourceRole: string } | null;
};

type Actions = {
  setSourceRole: (sourceRole: State["sourceRole"]) => void;
};

export const useSidebarStore = create<State & Actions>(
  devtools(
    persist(
      (set) => ({
        sourceRole: null,
        setSourceRole: (sourceRole) => set(() => ({ sourceRole })),
      }),
      { name: "sidebar-store" }
    )
  )
);

Was there a regression? @dbritto-dev

[dbritto-dev]

@aaronfulkerson on ts should be create<T>()(...) instead of create<T>(...)

[issam-seghir]

i have similar error

Argument of type '{ (nextStateOrUpdater: Store | Partial<Store> | ((state: WritableDraft<Store>) => void), shouldReplace?: false | undefined, action?: Action | undefined): void; (nextStateOrUpdater: Store | ((state: WritableDraft<...>) => void), shouldReplace: true, action?: Action | undefined): void; }' is not assignable to parameter of type '{ (nextStateOrUpdater: CartSlice | Partial<CartSlice> | ((state: WritableDraft<CartSlice>) => void), shouldReplace?: false | undefined, action?: Action | undefined): void; (nextStateOrUpdater: CartSlice | ((state: WritableDraft<...>) => void), shouldReplace: true, action?: Action | undefined): void; }'.
  Types of parameters 'shouldReplace' and 'shouldReplace' are incompatible.
    Type 'true' is not assignable to type 'false'.ts(2345)

my store :

const useStoreBase = create<Store>()(
	devtools(
		persist(
			subscribeWithSelector(
				immer((...a) => ({
					...createAuthSlice(...a),
					...createCartSlice(...a),
					...createModalSlice(...a),
					...createSidebarSlice(...a),
				}))
			),
			{
				name: "store",
				storage: createJSONStorage(() => AsyncStorage),
			}
		)
	)
);



//? Auto generated selectors for the store using 'auto-zustand-selectors-hook'
//* Usage : useStore.use.selectorName()

export const useStore = createSelectorFunctions(useStoreBase) as typeof useStoreBase & ZustandFuncSelectors<Store>;

//? Setup the devtools using 'simple-zustand-devtools'
//* You can use Redux Devtools Extension as well , with the built in  'zustand/middleware'

if (process.env.NODE_ENV === "development" || __DEV__) {
    mountStoreDevtool("compos-resto-store", useStore);
}

[alexanderhorner]

Doesn't seem like the problems are related. Did you install the newest version?

[issam-seghir]

Doesn't seem like the problems are related. Did you install the newest version?

i have "zustand": "^5.0.2"

[mattbieber]

Getting the same error as @issam-seghir with immer. On each line that spreads a slice inside the immer invocation

[dbritto-dev]

@mattbieber that could be expected due to you need to explicitly type your slices but this is not the case