Error: No QueryClient set, use QueryClientProvider to set one

[mdeoliveira-hw]

Describe the bug

I have a project that consist in multiple packages :

• a library who export some react-query hooks that define @tanstack/react-query as peerDependency
• a React app, build with create-react-app that use the library to fetch data.

Both package, used the same version of react and @tanstack/react-query.

If we try to use the hooks define in the library from the react app, we got the following error :

Your minimal, reproducible example

• https://github.com/mdeoliveira-hw/react-query-queryclient-issue
• https://github.com/mdeoliveira-hw/react-query-queryclient-issue-lib (lib that export custom hooks)

Steps to reproduce

yarn 
yarn start

Expected behavior

We should be able to use the queryClient in both sides (app + lib).

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS : macOS
• Browser : Chrome 110.0.5481.77 (Build officiel) (arm64)

TanStack Query version

4.24.4

TypeScript version

4.9.5

Additional context

No response

[sergiidiak]

This is most likely CSJ vs ESM issue. If the hook can't find context, even though you have it in your app, either your library pulls CJS version of react-qeury or your app pulls CJS version of your library, but the library pulls ESM of react-query

[sergiidiak]

From your repro example. Your library is built with commonjs module type, but app is using ESM. Try changing 'module' to 'es2020' in your lib tsconfig.json

[mdeoliveira-hw]

Thank you @sergiidiak for your quick response, that solved the problem