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

[snelsi]

Describe the bug

When using Next.js --experimental-https option, ReactQueryDevtools v5 fails to render in dev mode with the following error:

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

Full Error Log

``` Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'fetchStatus') at getQueryStatusColor (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/Devtools/HTDVDYMT.js:9231:21) at Object.eval [as fn] (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/Devtools/HTDVDYMT.js:10262:86) at runComputation (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:517:22) at updateComputation (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:500:3) at createMemo (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:156:5) at QueryRow (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/Devtools/HTDVDYMT.js:10262:79) at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:1049:24) at untrack (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:302:12) at createComponent (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:1049:10) at children (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/Devtools/HTDVDYMT.js:10166:95) at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/Devtools/HTDVDYMT.js:1013:23) at updateFn (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:94:38) at runUpdates (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:628:12) at createRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:98:12) at addNewItem (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/Devtools/HTDVDYMT.js:1005:67) at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/Devtools/HTDVDYMT.js:980:11) at untrack (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:306:12) at Object.eval [as fn] (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/Devtools/HTDVDYMT.js:960:71) at runComputation (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:517:22) at updateComputation (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:500:3) at createMemo (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:156:5) at Key (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/Devtools/HTDVDYMT.js:1021:72) at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:1049:24) at untrack (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:302:12) at createComponent (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:1049:10) at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/Devtools/HTDVDYMT.js:10161:139) at DevtoolsPanel (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/Devtools/HTDVDYMT.js:10246:5) at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:1049:24) at untrack (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:306:12) at createComponent (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:1049:10) at get children [as children] (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/Devtools/HTDVDYMT.js:9845:87) at Object.eval [as fn] (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:1275:27) at runComputation (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:517:22) at updateComputation (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:500:3) at createMemo (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:156:5) at Show (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:1272:10) at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:1049:24) at untrack (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:306:12) at createComponent (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:1049:10) at get children [as children] (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/Devtools/HTDVDYMT.js:9840:83) at Object.eval [as fn] (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/Devtools/HTDVDYMT.js:887:59) at runComputation (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:517:22) at updateComputation (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:500:3) at createMemo (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:156:5) at resolveElements (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/Devtools/HTDVDYMT.js:800:83) at TransitionGroup (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/Devtools/HTDVDYMT.js:887:31) at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:1049:24) at untrack (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:302:12) at createComponent (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/chunk/L2WNRKEK.js:1049:10) at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+query-devtools@5.0.0-rc.1/node_modules/@tanstack/query-devtools/build/Devtools/HTDVDYMT.js:9837:137) ```

Your minimal, reproducible example

Error requires custom local setup, use this codesandbox as a template:
https://codesandbox.io/p/sandbox/mystifying-browser-6xm944

Steps to reproduce

Dependencies

"next": "13.5.4"
"@tanstack/react-query": "^5.0.0-rc.4",
"@tanstack/react-query-devtools": "^5.0.0-rc.4"

Project files setup

Copy this codesandbox localy for files setup

Setup https

Start your local server by running next dev --experimental-https.
Open https://localhost:3000 in any browser.

Devtools either aren't rendered, or throws an error when you try to open it.
You should see an error in your console log.

Expected behavior

Is it possible to make DevTools work properly for the local https environment?
Do I need to configure something on my side?
From what I can see, activeQueryState prop is not defined.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: Windows 11
• Browser: Chrome
• Version: 117.0.5938.132

Tanstack Query adapter

react-query

TanStack Query version

5.0.0-rc.4

TypeScript version

5.2.2

Additional context

No response

[judicaelandria]

Hey! I don't think creating a page for QueryClientProvider is the right thing to do, could you please create the provider outside the app
something like this

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { ReactNode } from "react";

type Props = {
  children: ReactNode;
};

const client = new QueryClient();

export const Provider = ({ children }: Props) => {
  return (
    <QueryClientProvider client={client}>
      {children}
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
};

then you can import it inside the layout, it should work
just tested it and the devtools is working perfectly with the experimental https

[snelsi]

Yeah, after some testing, the issue is probably unrelated to https option, but relates to our internal usage of react-query-kit. Can reproduce the error on http env as well. I will update the issue description.

@judicaelandria
query-provider.tsx is not a page. Your code does exactly the same thing as the one in mine Codesandbox

[judicaelandria]

right, but yes it's not related to https

[0x083]

I've the same TypeError with dependencies:

"next": "12.2.5"
"@tanstack/react-query": "5.0.0-rc.12",
"@tanstack/react-query-devtools": "5.0.0-rc.13"

[TkDodo]

I forked the original sandbox and removed --experimental-https because it always error'd the page with:

connection closed before message completed

the devtools work fine: https://codesandbox.io/p/sandbox/musing-snow-sgvw92?file=%2Fpackage.json%3A25%2C1

[GLabat]

I had the same issue in a SPA app (no NextJS, no HTTPS). Looks like it was related to local storage.

• no pb in an anonymous session
• after cleaning up the local storage, problem is gone

Maybe a no-more-there query stored in reactQueryDevtoolsActiveQueryHash? Or some settings from v4 dev tools no more valid?

[gregghawes]

I'm also facing this issue. It only seems to happen on some queries. I tried clearing local storage but that didn't fix the issue.

"react": "^18.2.0",
"@tanstack/react-query": "^5.14.1",
"@tanstack/react-query-devtools": "^5.14.1",

I think for me it happens when fetchNextPage is called with useInfiniteQuery

[TkDodo]

@gregghawes please show a reproduction and open a new issue

[srtfisher]

I have seen this happen as well with the following and am working on replicating it in isolation:

"@tanstack/react-query": "^5.14.2",
"@tanstack/react-query-devtools": "^5.14.2",

This was in a React Router SPA.

[bskimball]

Just had it happen now. I'm changing the queryKey based on search params.

  const params = useSearch({ strict: false });
  const query = useQuery({
    queryKey: [
      "production-performance",
     params,
    ],
    queryFn: async () => {
      const { data } = await http.get("/api", { params });

      return data;
    },
  });

Still testing and will create a repro if I can