Repository navigation
Thirdparty library with nextJS and @tanstack/react-query : No QueryClient set #4346
Description
Describe the bug
Hello,
Since @tanstack/react-query v4.3.0 (ESM support) has issues with third party libraries that encapsulate react-query when using it with nextJS (maybe other stacks also, but this is confirmed for nextjs at least)
An example is with @zodios/react v10 (that added support for `@tanstack/react-query v4)
The error message we get is : Error: No QueryClient set, use QueryClientProvider to set one
Your minimal, reproducible example
https://stackblitz.com/edit/github-ke9tby-8mxjkp?file=package.json
Steps to reproduce
V4.2.3, no bug: https://stackblitz.com/edit/github-ke9tby?file=package.json
V4.3.0, with bug: https://stackblitz.com/edit/github-ke9tby-8mxjkp?file=package.json
- Zodios library is using
@tanstack/react-queryas a peerdependancy and generates ES6 cjs package - There is no duplicates dependancies on package.json and no duplicates on generated lock file
My guess is a combined bug of webpack with esm and the way @tanstack/react-query bundles esm + cjs packages.
Expected behavior
No error should happen
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- Linux Ubuntu, StackBlitz
- Chrome
- V100+
react-query version
all versions of @tanstack/react-query > v4.3.0
TypeScript version
v4.8.4
Additional context
No response
Activity
TkDodo commentedon Oct 20, 2022
hmm, I don't have an immediate answer right now, just wanted to let you know that I'm successfully using the same pattern with nextJs and trpc:
tanstack/react-query"@trpc/react": "10.0.0-proxy-beta.17"things work fine.
maybe one difference is that zodios only creates cjs, while trpc creates esm as well?
ecyrbe commentedon Oct 20, 2022
Yes, i think that could be the issue here.
But i also know that ts-rest has esm also and has the issue for at least one user.
So i Can try to generate an esm package for zodios and keep you informed of the result.
OliverDudgeon commentedon Oct 20, 2022
Having a similar issue going from 4.2.3 to 4.3.x. I have a library that has query and a peerdep and uses tsup to build cjs and esm. My NextJS has shows the same error and OP.
ecyrbe commentedon Oct 20, 2022
@OliverDudgeon in the mean time you can use the workaround i referenced here : ecyrbe/zodios#191
michaelangeloio commentedon Oct 21, 2022
Same issue here! +1 to this! Thank you @ecyrbe for you help!
ecyrbe commentedon Oct 21, 2022
so i had another issue with bundle sizes on zodios with nextjs and a user made me think about bundle anlyzer. Here the result for this issue :
As you can see, webpack is effectively bundling both mjs and cjs packages together when a third party library in only using cjs.
As the bundle analyzer suggest, the issue is there also for all peerdependencies of zodios :
@TkDodo if you know a bundler guru ? or call for help on twitter ?
ecyrbe commentedon Oct 21, 2022
So i guess this makes it an issue of
webpackand/ornextjsand not directly one of@tanstack/react-query.I guess you can close.
ecyrbe commentedon Oct 22, 2022
@TkDodo i found an opened issue on nextjs that indicates the fault is definitively on nextjs bundler : vercel/next.js#35112
i'll then close and reference this issue on nextjs
TkDodo commentedon Oct 22, 2022
Thanks @ecyrbe for looking into this. This is easily one of my least favourite parts of the js ecosystem 😅
ecyrbe commentedon Oct 22, 2022
@TkDodo for information, the issue is still there after zodios migration to esm.
tRPC has no issue because it uses
withTRPCto allocate the provider and the client, hence everything is initialized inside tRPC.So for now i added a workaround in zodios documentation : http://www.zodios.org/docs/server/next#file-structure
If you want i can come up with a PR to also add a note on react-query docs, just tell me.
TkDodo commentedon Oct 23, 2022
Not sure what the wording would be for us, but feel free to give it a try 👍
ecyrbe commentedon Oct 23, 2022
@TkDodo So this was an adventure, but it's now also fixed on zodios with correct esm exports (i did not add exports at first in
package.json). So i'll change the speech in my docs.Indeed, the issue is transitive. Now that i fixed this, a library using zodios with cjs only package will have the issue.
The issue seems to be when a library does not add exports webpack will use the library main entry resolution for it and it's peer dependencies. Meaning in the case of zodios, it was using esm on app and cjs on lib.
So to fix this, you need to add a
mainandmoduleentry, but alsoexportsentries in package.json.This is a nightmare for any user to understand.
So it'll try to create a speech about bundling that could be used for both
zodiosandreact-query