Import react query as a peerDependency into Next.js throws error - Error No QueryClient set, use Qu

[quartz echo]

I am using a monorepo. In one package I have my web-app build with next.
In another one all my react-query hooks.
When I import the hooks from the library into Next.js I get the following error:

error - node_modules/@company-libs/queries/node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs (34:0) @ useQueryClient
error - Error: No QueryClient set, use QueryClientProvider to set one
```

The repo is here: https://github.com/kevinmamaqi/react-query-next-js

Next.js App has the QueryProvider as specified in the docs.

Any ideas please? - I've tried many combinations and it doesn't seem to work.

[vapid breach]

FWIW - im not experienced with react query and SSR, i use it exclusively in a CSR environment. the maintainers who frequent support could give better advice later but just saw this in the docs

following the docs page you've based your code on, it mentions the need for initiating a query client per page. your index.tsx page doesn't do this - may be worth exploring
https://tanstack.com/query/v4/docs/guides/ssr

[ripe oxide]

you have Tanstack/query as a dependency in the lib, which means it gets bundled with it, giving you likely two versions of it, which explains the error: https://github.com/kevinmamaqi/react-query-next-js/blob/70f39de48f00a56a7acafabab3177f8cf1c4b749/libs/queries/package.json#L15

what you want is:

• peerDependency so that it picks up the version of the host app
• devDependency so that you can work with it locally

[quartz echo]

Regarding the per each page @vapid breach I think it is when you dehydrate on the server side only.

Regarding the devDependencies I tried it already @ripe oxide and it doesn't work either. Same error, I just updated the repo.

Any other ideas why this could happen?

[ripe oxide]

check your node_modules if there are two versions of react-query around

I don't really see how this is bundled in this example. is the shared lib usually a dependency you get from npm? is this a monorepo?

[quartz echo]

It is a library in development mode in another folder. Not sharing dependencies in a monorepo. It is installed via npm install ../lib/queries. In node_modules it has the same version of @tanstack/react-query. V4.10.3.

[ripe oxide]

So I did npm install in both the lib and the app directory, and what I'm seeing is that the app directory has a tanstack/query in the top level of node_modules, and then another one in node_modules/@company-libs/queries/node_modules

my guess is what you want / need for this is a monorepo setup

what you can do is delete the node_modules from the lib directory. Also, your app is missing axios as dependency, which the lib has as a peerDep. This only works because node_modules are copied.

so if I add axios to the app then it works fine.

but this is a troublesome setup. if you want file-system linking, look into pnpm and their workspace protocol. Or, use yalc to link the lib to the app - yalc only copies what npm publish would also give you.

this is certainly not a RQ issue