Typescript store error

[ShravanSunder]

I'm getting the following error from the below code. I'm copying the typescript example for my purpose. I'm unsure as to why i'm getting this typescript error.

Exported variable 'useEthersAppStore' has or is using name 'StorePersist' from external module 
"/Documents/dev/open-source/ethereum/scaffold-eth/eth-hooks/node_modules/zustand/middleware/persist" 
but cannot be named.ts(4023)

import { createStore } from 'zustand';
import { devtools, persist } from 'zustand/middleware';

import { IBlockNumberState } from '~~/context/ethers-app/BlockNumberContext';

interface IEthersAppStore {
  blockNumberStore: IBlockNumberState;
}

export const useEthersAppStore = createStore<IEthersAppStore>()(
  devtools(
    persist((set) => ({
      blockNumberStore: {},
      setBlockNumber: (blocknumber: number, chainId: number): void =>
        set((state): IEthersAppStore => {
          state.blockNumberStore[chainId] = blocknumber;
          return state;
        }),
    }))
  )
);

[dai-shi]

This is duplicate of #1100 and #1103, and will be fixed with #1106.

Can you try if this fixes?
https://ci.codesandbox.io/status/pmndrs/zustand/pr/1106
Find "Local Install Instructions" ☝️

[ShravanSunder]

@dai-shi that seems to solve it

[ShravanSunder]

@dai-shi I'm getting an error where the hook created by createStore isn't a function. I'm using the commit you mentioned above.

This expression is not callable.
  Type 'Write<WithDevtools<StoreApi<IEthersAppStore>>, StorePersist<IEthersAppStore, IEthersAppStore>>' has no call signatures.ts(2349)

import { createStore } from 'zustand';
import { devtools, persist } from 'zustand/middleware';

import { IBlockNumberState } from '~~/context/EthersAppState';

interface IEthersAppStore {
  blockNumberStore: IBlockNumberState;
}

type TSetStoreFunc =
  | IEthersAppStore
  | Partial<IEthersAppStore>
  | ((state: IEthersAppStore) => IEthersAppStore | Partial<IEthersAppStore>);

const setBlockNumber = (chainId: number, blocknumber: number): TSetStoreFunc => {
  return (state): IEthersAppStore => {
    state.blockNumberStore[chainId] = blocknumber;
    return state;
  };
};
export const useEthersAppStore = createStore<IEthersAppStore>()(
  devtools(
    persist((set) => ({
      blockNumberStore: {},
      setBlockNumber: (blocknumber: number, chainId: number): void => set(setBlockNumber(chainId, blocknumber)),
    }))
  )
);


export const useBlockNumberContext = (): number => {
  const store = useEthersAppStore();
  // if (blockNumber == null) {
  //  console.log('blockNumber context is null');
  // }
  // invariant(blockNumber != null, 'useBlockNumberContext needs to be used under BlockNumberContext');
  return blockNumber ?? 0;
};