Error: No QueryClient set, use QueryClientProvider to set one (vite, react-query, pnpm)

[drywolf]

Describe the bug

I am using pnpm workspaces to manage my mono-repo.
In the repo I have a vite-app and several other private packages/modules that the app depends on

• all of those are linked in pnpm-workspace.yaml
• react and typescript are used in all packages

When running the vite-app...

• via pnpm dev (the hot-reload / watch mode) ... the REST queries performed via react-query work fine
• via pnpm build + pnpm preview (production bundling + static http server) ... the REST queries fail and the browser console shows the error:

index.b3cd60c6.js:32 Error: No QueryClient set, use QueryClientProvider to set one
    at uh (index.b3cd60c6.js:32:100108)
    at ch (index.b3cd60c6.js:32:100521)
    at fh (index.b3cd60c6.js:32:101749)
    at dh (index.b3cd60c6.js:32:101779)
    at Ch (index.b3cd60c6.js:40:695)
    at Al (index.b3cd60c6.js:30:19059)
    at Mc (index.b3cd60c6.js:32:44307)
    at Nc (index.b3cd60c6.js:32:40003)
    at tp (index.b3cd60c6.js:32:39934)
    at fi (index.b3cd60c6.js:32:39793)

Your minimal, reproducible example

https://github.com/drywolf/react-query-error-No-QueryClient

Steps to reproduce

see README.md in the linked repository (https://github.com/drywolf/react-query-error-No-QueryClient)
(also I tried to make each step a separate git commit)

Expected behavior

The react-query REST requests should work regardless if it is in the vite hot-reload server or a production build bundle.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Windows 10 Pro 21H1
Build 19043.1706

react-query version

v3.39.1

TypeScript version

v4.7.3

Additional context

The error only seems to happen if the react-query hook is called from within a function of a package/module that is linked via pnpm-workspace to the vite-app.
If I put the same hook function+query into a .ts file directly at the vite-app, then the error does not happen.

Maybe related to #3505 ?!

[TkDodo]

This usually means that you have somehow pulled in two versions of react-query, or two versions of react. React Query merely creates a new context provider and reads from it. If you have two versions, they will have different contexts, so the read won't work and we'll throw that error.

Make sure your package / module has defined react-query as peerDependency. I don't think there's anything we can do here...

[drywolf]

Thanks for the quick reply.

This usually means that you have somehow pulled in two versions of react-query, or two versions of react.

Is there any way for me to find out if this is the case ?
I only know that in react-devtools I can see which component was rendered by which react-version, but in the case of the above error, no react components are rendered at all, so the react-devtools are also empty.
Same question for react-query, can I somehow debug/test if there are multiple versions being used ?

PS: I don't think this is the issue here, as pnpm should make sure I only use a single version of those packages across the entire workspace

Make sure your package / module has defined react-query as peerDependency

I tried to do this in the vite-app as well as in the my-lib of the above reproduction repository, in either way it leads to typescript complaining that one of the react-query imports can no longer be resolved.
(again I think this goes back to how pnpm handles such dependencies)

Thanks

[TkDodo]

okay, we have had issues with vite in the past, but I'm not an expert here. What you can do is try out v4 beta - we've changed a lot in terms of bundling (es modules).

here is a similar issue where the problem was wrong dependency resolution:

• [bug][react-native] crash since 3.34.7+ - No QueryClient set, use QueryClientProvider to set one #3153

this (open) issue also looks similar, but I haven't gotten any updates there:

• Unable to use react-query when hooks are created in separate library #3595

and this discussion about microfrontends was also about wrong versions of RQ:

• Microfrontend sharing react-query QueryClientProvider throws No QueryClient set error #3697

[drywolf]

PS: I quickly checked

• vite-app/node_modules/react/package.json vs my-lib/node_modules/react/package.json
• vite-app/node_modules/react-query/package.json vs my-lib/node_modules/react-query/package.json

both of which appear to point to the exact same versions ... but AFAIK pnpm provides those by creating symlinks/hardlinks of the files in the local node_modules folders to a central package cache directory.

I can't speak for if this is causing such trouble as you describe when the final JS production bundle is built ?!

[TkDodo]

can you check the final bundle if you see any indication of react-query being in there twice? For example, the string No QueryClient set, use QueryClientProvider to set one would likely be in there twice.

[drywolf]

I only find one occurrence of throw new Error("No QueryClient set, use QueryClientProvider to set one"); in the production bundle.

edit: #3595 does indeed sound like it might be the same (or at least a similar) problem

[TkDodo]

then let's continue the discussion in #3595 please

[emurano]

vitejs/vite#6780 (comment)

Make sure your library has all peer dependencies listed in your rollup config in your vite config file: build.rollupOptions.external

[donalnofrixion]

For anyone else having this problem when using Vite.

You need to add @tanstack/react-query to the vite.config.ts rollupOptions

rollupOptions: { external: ['react', 'react-dom', 'axios', '@tanstack/react-query'],

[stefmabo]

thanks @donalnofrixion, it works!

[yhoungdev]

@donalnofrixion how about in NextJs, getting same issue