React application lazy imports - TypeError: undefined is not an object (evaluating 'a._result.default')

I have a react application which I monitor with Sentry. Inside the Sentry I see quite often the following error:

React ErrorBoundary TypeError: undefined is not an object (evaluating 'a._result.default')

As far as I understand the Error seems to be related to some lazy imports. But I am unsure since none of the listed files contain a lazy import and the whole application is Wrapped in a Supsense boundary. The Sentry trace is pointing me to some snippet from react (placed at the very end of the post). If I look at the stack trace it seems that the Error is originating from TanStackQuery, but I am unsure if this is really the case or if I do something wrong here.

This is the last file of the stack trace.

import type { FC, PropsWithChildren } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useState } from 'react';

const client = () =>
  new QueryClient({
    defaultOptions: {
      queries: {
        networkMode: 'always',
        staleTime: 1000 * 60 * 60 * 24 * 0.5, // 12h
        retry: 2,
        refetchOnWindowFocus: false
      }
    }
  });

const TanStackQueryProvider: FC<PropsWithChildren> = ({ children }) => {
  const [queryClient] = useState(client); // Sentry points at this line

  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
};

export default TanStackQueryProvider;

};

Maybe anyone has some insights?

Appendix

Code Snippet from Sentry

StackTrace

You need to sign in to view this answers

Appendix

Related Post