Error: No QueryClient set, use QueryClientProvider to set one in ReactQueryDevTools with vite setup

[akharkhonov]

Describe the bug

After running `yarn dev', react query throws the following errors:

Your minimal, reproducible example

https://codesandbox.io/s/adoring-shirley-wy0dpd?file=/package.json
https://github.com/akharkhonov/vite-react-query

Steps to reproduce

1. Install dependencies yarn
2. Run dev mode yarn dev
3. Open devttools and see errors

Expected behavior

As a user, I expected normal behaviour but I'm seeing errors

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: macOs
• Browser: Chrome
• Version: 100.0.4896.88 (Official Build) (x86_64)

react-query version

3.34.19

TypeScript version

4.6.3

Additional context

No response

[faradaytrs]

same here

[TkDodo]

thanks for reporting. things work fine when downgrading to vite: 2.9.1, so my assumption is that 2.9.2 has a change somewhere that is either unintended, or that we are not compatible with. Can someone experienced with vite help me track it down please?

downgraded, working sandbox here

from our side: the devtools are bundled separately, but they import from 'react-query'. We do this so that the devtools pick up the same context that the app uses (otherwise, they wouldn't do anything). However, judging from the screenshot where it says useQueryClient2, it seems like there is some duplication going on now. If the devtools bring their own copy of react-query, there won't be a context above them, which would explain the error.

[akharkhonov]

@TkDodo thanks for your reply! Indeed, I hadn't thought about downgrading vite to a lower version, I was only playing around with react & react-query versions 😋. As for the duplicates in vite and dev-tools, yes I noticed that too, it was weird for me to see the 2 suffix in almost all variable names, but didn't pay enough attention to it. Also, I tried to debug the vite build in dev mode myself as part of another problem, but no luck, because vite uses esbuild for dev, and esbuild is written in go, so, yes, we definitely need the help of someone who is familiar with vite+esbuilld

[TkDodo]

can we open an issue in vite and back link it here maybe? I'm happy to help from react-query side, but I'm afraid I don't know how at the moment. Note that we also had issues with vite in particular before:

• "No QueryClient set" when upgrading from 3.12.0 to 3.12.1 #1936

[TrashPandacoot]

I saw this in the vite issues just a bit ago, it looks like it might've been a vite regression that's been reverted.
vitejs/vite#7736

[akharkhonov]

@TkDodo since this is already a known problem, feel free to close this issue or mark it as a duplicate