Thirdparty library with nextJS and `@tanstack/react-query` : No QueryClient set

[ecyrbe]

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-query as 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

[TkDodo]

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:

• nextJs app adds tanstack/react-query
• it also depends on "@trpc/react": "10.0.0-proxy-beta.17"
• trpc/react has react-query as a peerDependency

things work fine.

maybe one difference is that zodios only creates cjs, while trpc creates esm as well?

[ecyrbe]

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]

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]

@OliverDudgeon in the mean time you can use the workaround i referenced here : ecyrbe/zodios#191

[michaelangeloio]

Same issue here! +1 to this! Thank you @ecyrbe for you help!

[ecyrbe]

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 :

• zod
• axios
• @tanstack/react-query

@TkDodo if you know a bundler guru ? or call for help on twitter ?

[ecyrbe]

So i guess this makes it an issue of webpack and/or nextjs and not directly one of @tanstack/react-query.

I guess you can close.

[ecyrbe]

@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]

Thanks @ecyrbe for looking into this. This is easily one of my least favourite parts of the js ecosystem 😅

[ecyrbe]

@TkDodo for information, the issue is still there after zodios migration to esm.
tRPC has no issue because it uses withTRPC to 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]

Not sure what the wording would be for us, but feel free to give it a try 👍

[ecyrbe]

@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 main and module entry, but also exports entries 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 zodios and react-query