[Bug]: "No QueryClient set, use QueryClientProvider to set one" after adding @suspensive/react-query

[PetrovaDaria]

Package Scope

@suspensive/react-query

Bug description

We used react-query in our monorepository project but after adding new dep @suspensive/react-query we started to receive error "No QueryClient set, use QueryClientProvider to set one" and white screen during local development in apps. It is a floating error, sometimes it appears and sometimes is disappears. The full description of problem is given in the demo-repository https://github.com/PetrovaDaria/rq-monorepo-demo

Expected behavior

@suspensive/react-query doesn't broke local development with error "No QueryClient set, use QueryClientProvider to set one"

To Reproduce

I created demo repo with main settings as in my production project which has this problem. Go to "How to reporduce it" section to find details.

https://github.com/PetrovaDaria/rq-monorepo-demo

Possible Solution

No response

etc.

Also created issue in @tanstack/query repo https://github.com/TanStack/query/issues/6225

[manudeli]

@PetrovaDaria Thank you for your interest in using Suspensive and for reporting good issues.

I saw Tkdodo's response in https://github.com/TanStack/query/issues/6225#issuecomment-1774674250 in https://github.com/TanStack/query/issues/6225#issuecomment-1774674250 but I think his response is not you want. because you don't want to force all apps in monorepo have same @tanstack/react-query's version.

Do you use yarn version 1 or node version 16? I think you can solve this issue by using yarn version 3 with node version 18 so I added this Pull Request(https://github.com/PetrovaDaria/rq-monorepo-demo/pull/1) to resolve your issue. Check this please.

I want to recommend you to add .nvmrc to force node-version as 18 and yarnrc.yml to force yarn version 3. and to setup node-version automatically, I want to recommend you to setup deeper shell integration https://github.com/nvm-sh/nvm#deeper-shell-integration

If you solve this problem, close this issue yourself, or mention me please.

[PetrovaDaria]

@manudeli thank you for a quick response, I'll check your solution. I forgot to add .nvmrc, we use node v16. What about yarn - we use v1 and I'm not sure if we can use v3. Some teammates tried to switch to v3 but they met a restriction in our organization's ui-kit package which didn't support yarn v3. But I need to clarify this moment.

Also I didn't understand why node v18 and yarn v3 will help in this case.

[manudeli]

@PetrovaDaria I'm actually not sure why it works so well. However, I think that using node version 18 is lts, so I don't think there is any reason not to use v18. (https://github.com/nodejs/release#release-schedule)

Some teammates tried to switch to v3 but they met a restriction in our organization's ui-kit package which didn't support yarn v3. But I need to clarify this moment.

I think the problem you mentioned is caused by using yarn berry's pnp. you do not have to use nodeLinker: pnp. (https://yarnpkg.com/features/linkers#nodelinker-pnp) I think nodeLinker: node-modules(https://yarnpkg.com/features/linkers#nodelinker-node-modules) will probably solve your problem.

In my opinion, These two settings are expected to solve the problem fairly easily and simply.

[manudeli]

First of all, Test my solution(https://github.com/manudeli/rq-monorepo-demo) please. We should first check if this change completely solves your problem.

[manudeli]

@PetrovaDaria I close this issue. if need more conversation, reopen this issue again please