TanStackT
TanStack•8mo ago
then-purple

TypeError: Cannot read properties of undefined (reading 'fetchStatus')

When i render react query dev-tools
const ReactQueryDevtoolsProduction = lazy(() =>
  import('@tanstack/react-query-devtools').then((res) => ({ default: res.ReactQueryDevtools })),
)

i get
chunk-5TCSIIV2.js?v=c11d2474:2673 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'fetchStatus')
    at getQueryStatusColor (chunk-5TCSIIV2.js?v=c11d2474:2673:21)
    at Object.fn (chunk-IU6STECB.js?v=c11d2474:10521:34)
    at runComputation (chunk-5TCSIIV2.js?v=c11d2474:459:22)
    at updateComputation (chunk-5TCSIIV2.js?v=c11d2474:438:3)
    at createMemo (chunk-5TCSIIV2.js?v=c11d2474:114:10)
    at QueryRow (chunk-IU6STECB.js?v=c11d2474:10521:17)
    at chunk-5TCSIIV2.js?v=c11d2474:944:24
    at untrack (chunk-5TCSIIV2.js?v=c11d2474:259:58)
    at createComponent (chunk-5TCSIIV2.js?v=c11d2474:944:10)
    at children (chunk-IU6STECB.js?v=c11d2474:10378:32)

in my app.

in chrome devtools i isolated problematic query key in at getQueryStatusColor (chunk-5TCSIIV2.js?v=c11d2474:2673:21) and rendered this query separately i had no issues.

I couldn't figure out how to reproduce this error outside of my app. I cannot even reproduce it inside my app if i isolate queries. Sometimes i can render devtools without any issues. I tried to look into the implementation but it didn't help. Could you please help me investigate this problem?

deps
"@tanstack/react-query": "^5.80.7",
"@tanstack/react-query-devtools": "^5.80.7",
"@trpc/tanstack-react-query": "^11.3.1",
"@trpc/client": "^11.3.1",
Was this page helpful?