zustand-persist icon indicating copy to clipboard operation
zustand-persist copied to clipboard

Example code broken with Typescript

Open WontSeeMeComin opened this issue 2 years ago • 1 comments

Hi, I am trying to get this working with a Typescript React project I am working on, but I'm getting an incomprehensible type error and it's keeping me from successfully configuring this.

I pulled your example code from the README into my local VS Code after installing 0.4.0. Here is the error I'm seeing in the IDE:

Argument of type 'StateCreator<{ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }, (partial: ({ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }) | Partial<{ isAuthenticated: any; user: any; } & { ...; } & { ...; }> | ((state: { ...; } & ... 1 more ... & { ...; }) => ({ .....' is not assignable to parameter of type 'StateCreator<{ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }, [], [never, unknown][], { isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }>'.
  Type 'StateCreator<{ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }, (partial: ({ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }) | Partial<{ isAuthenticated: any; user: any; } & { ...; } & { ...; }> | ((state: { ...; } & ... 1 more ... & { ...; }) => ({ .....' is not assignable to type '(setState: (partial: ({ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }) | Partial<{ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }> | ((state: { ...; } & ... 1 more ... & { ...; }) => ({ ...; } & ... 1 more ... & { ...; }) | Partial<...>), replace?: b...'.
    Types of parameters '$$storeMutations' and '$$storeMutations' are incompatible.
      Type '[]' is not assignable to type '(partial: ({ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }) | Partial<{ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }> | ((state: { ...; } & ... 1 more ... & { ...; }) => ({ ...; } & ... 1 more ... & { ...; }) | Partial<...>), replace?: boolean) => ...'.
        Type '[]' provides no match for the signature '(partial: ({ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }) | Partial<{ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }> | ((state: { ...; } & ... 1 more ... & { ...; }) => ({ ...; } & ... 1 more ... & { ...; }) | Partial<...>), replace?: boolean): void'.ts(2345)

So the two important parts seem to be Types of parameters '$$storeMutations' and '$$storeMutations' are incompatible. and the last Type '[]' provides no match for the signature .... section. I just lack the skill to be able to discern what is wrong and what must be changed.

I tried looking for a @types/zustand-persist thinking my type definitions were old but no such package exists.

Here are my deps in case it's helpful:

"devDependencies": {
		"@electron-forge/cli": "^6.0.0-beta.63",
		"@electron-forge/maker-deb": "^6.0.0-beta.63",
		"@electron-forge/maker-rpm": "^6.0.0-beta.63",
		"@electron-forge/maker-squirrel": "^6.0.0-beta.63",
		"@electron-forge/maker-zip": "^6.0.0-beta.63",
		"@electron-forge/plugin-webpack": "6.0.0-beta.63",
		"@types/lodash": "^4.14.182",
		"@types/mkdirp": "^1.0.2",
		"@types/react": "^18.0.9",
		"@types/react-beautiful-dnd": "^13.1.2",
		"@types/react-dom": "^18.0.4",
		"@types/uuid": "^8.3.4",
		"@typescript-eslint/eslint-plugin": "^5.25.0",
		"@typescript-eslint/parser": "^5.25.0",
		"@vercel/webpack-asset-relocator-loader": "1.7.0",
		"css-loader": "^6.0.0",
		"electron": "18.2.3",
		"electron-devtools-installer": "^3.2.0",
		"eslint": "^8.0.1",
		"eslint-plugin-import": "^2.25.0",
		"fork-ts-checker-webpack-plugin": "^6.0.1",
		"node-loader": "^2.0.0",
		"npm-watch": "^0.11.0",
		"sass-loader": "^12.6.0",
		"simple-zustand-devtools": "^1.1.0",
		"style-loader": "^3.0.0",
		"ts-loader": "^9.2.2",
		"tsconfig-paths-webpack-plugin": "^3.5.2",
		"typescript": "^4.6.4"
	},
	"dependencies": {
		"add": "^2.0.6",
		"antd": "^4.20.5",
		"electron-context-menu": "^3.1.2",
		"electron-squirrel-startup": "^1.0.0",
		"get-file-object-from-local-path": "^1.0.2",
		"imagekit-javascript": "^1.5.1",
		"immer": "^9.0.15",
		"lodash": "^4.17.21",
		"mkdirp": "^1.0.4",
		"node-machine-id": "^1.1.12",
		"react": "^18.1.0",
		"react-beautiful-dnd": "^13.1.0",
		"react-dom": "^18.1.0",
		"sass": "^1.51.0",
		"sharp": "^0.30.6",
		"spinners-react": "^1.0.7",
		"styled-components": "^5.3.5",
		"uuid": "^8.3.2",
		"uuid-by-string": "^3.0.7",
		"yarn": "^1.22.19",
		"zustand": "^4.0.0-rc.1",
		"zustand-persist": "^0.4.0"
	}

Could it be that this version not compatible with the latest Zustand? Thanks.

WontSeeMeComin avatar Aug 06 '22 05:08 WontSeeMeComin

Forgot to mention, here is where persist is coming from:

//utils/persist.ts

import { configurePersist } from 'zustand-persist'

const { persist, purge } = configurePersist({
	storage: localStorage,
})
export default persist
export { purge }

WontSeeMeComin avatar Aug 06 '22 05:08 WontSeeMeComin