Open Devtools in Production with react-query v4

[morenyang]

For some reason, we want to enable the devtools in production for developers to debug the app.
In react-query v3, we can import the devtools like:

import { ReactQueryDevtools } from 'react-query/devtools/development';

but in v4, it doesn't seem to provide an entry point for the same purpose.
I have tried the solution that mention in #3296 (reply in thread)

import { ReactQueryDevtools } from '@tanstack/react-query-devtools/src/devtools';
// and
import { ReactQueryDevtools } from '@tanstack/react-query-devtools/build/cjs/packages/react-query-devtools/src/devtools';

but they didn't work and with an error from webpack:

Module not found: Error: Package path ./src/devtools is not exported from package <my_project_path>\node_modules\@tanstack\react-query-devtools (see exports
 field in <my_project_path>\node_modules\@tanstack\react-query-devtools\package.json)

Is there any good way to open the devtools in production with v4?
Thanks.

My environment:

[email protected]
[email protected]
[email protected]
@tanstack/[email protected]

[TkDodo]

We'll re-add that feature once we have merged the ESM bundling branch.

[TkDodo]

looks like your bundler doesn't understand ESM, so with v5, you'd need this:

import('@tanstack/react-query-devtools/build/modern/production.js')

as described in the docs: https://tanstack.com/query/v5/docs/react/devtools#devtools-in-production

[kab1012]

@TkDodo It still doesn't start the devtools in v5 and above

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

[TkDodo]

please file an issue with a minimal reproduction

[kab1012]

@TkDodo i was able to run the devtools in vercel deployment .

I still have a question:
in the prod build, even though i have a staleTime and cachetime of 5 mins and 2 mins respectively, the api is always "fetching" but surprisingly there is an api request only after 2 mins. Any thoughts?

[TkDodo]

no? show a reproduction please :)

[kab1012]

@TkDodo It still doesn't start the devtools in v5 and above

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