NextJS - persistQueryClient: TypeError: Cannot read properties of undefined (reading 'removeClient')

[MathiasPawshake]

Hi

I'm trying to add a persistQueryClient to my NextJS project but whenever I load my application I get the following error:
TypeError: Cannot read properties of undefined (reading 'removeClient')

This is my code:

// app.jsx
const queryClientOptions = {
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      staleTime: 5 * (60 * 1000), // 5 mins
      gcTime: 10 * (60 * 1000), // 10 mins
    },
  },
};

const localStoragePersistor = createSyncStoragePersister({
  storage: typeof window !== "undefined" ? window.localStorage : undefined,
});

const App = ({ Component, pageProps }) => {
  const [queryClient] = useState(() => new QueryClient(queryClientOptions));

  return (
    <>
      <PersistQueryClientProvider client={queryClient} persistor={localStoragePersistor}>
        <ReactQueryDevtools initialIsOpen={false} />
        <HydrationBoundary state={pageProps.dehydratedState}>
          <Component {...pageProps} />
        </HydrationBoundary>
      </PersistQueryClientProvider>
    </>
  );
};

export default App;

Not sure why this is happening because I do pass undefined when I don't have a window object from the start. Most pages are server side rendered.

Thanks in advance

[TkDodo]

persistor={localStoragePersistor}

it's persister

[MathiasPawshake]

This was indeed a typo that I took over from an example. I also had to pass persistOptions instead of passing persister to PersistQueryClientProvider

<PersistQueryClientProvider client={queryClient} persistOptions={{ persister: localStoragePersister }}>
            <ReactQueryDevtools initialIsOpen={false} />
            <HydrationBoundary state={dehydratedState}>{children}</HydrationBoundary>
        </PersistQueryClientProvider>

Lessons learned: always use typescript 😅