Unable to use @tanstak/react-query in a monorepo - nx

[MathurAditya724]

Describe the bug

my team and I are trying to shift all our application's codebase to nx, but due to some problem with Tanstack react query it is showing Invalid hook call.

We tried creating a new repo and removed the shared-ui lib (cause we thought it might be the cause of the peerDependencies as mentioned here

We were able to run it when had a standalone next app created using create-next-app

In the attached repo the code is very simple, it's just

<QueryClientProvider client={client}>
  <Component {...pageProps} />
</QueryClientProvider>

we tried this with macOS also thinking it might be a Windows error but apparently, it was not

Your minimal, reproducible example

https://github.com/MathurAditya724/tanstack_error

Steps to reproduce

// Install all the dependencies
npm i

// Run the report server
npx nx run report:serve

Expected behavior

The application code we have given in the repo should just work, Idk if it's a config issue or a problem with nx. We were just creating the repo with the nx guide to create an integrated mono repo.

How often does this bug happen?

Every time

Screenshots or Videos

Platform

Node   : 18.7.0
OS     : win32 x64
npm    : 9.6.5
Hasher : Native
   
nx                 : 16.2.1
@nx/js             : 16.2.1
@nx/jest           : 16.2.1
@nx/linter         : 16.2.1
@nx/workspace      : 16.2.1
@nx/cypress        : 16.2.1
@nx/devkit         : 16.2.1
@nx/eslint-plugin  : 16.2.1
@nx/nest           : 16.2.1
@nx/next           : 16.2.1
@nx/node           : 16.2.1
@nx/react          : 16.2.1
@nrwl/tao          : 16.2.1
@nx/vite           : 16.2.1
@nx/web            : 16.2.1
@nx/webpack        : 16.2.1
typescript         : 5.0.4

Tanstack Query adapter

react-query

TanStack Query version

v4.29.7

TypeScript version

~5.0.2

Additional context

No response

[TkDodo]

please update nextjs. "Cannot read properties of null (reading useEffect)" was an issue in nextJs:

• TypeError: Cannot read properties of null (reading 'useEffect') #5371

the reproduction uses 13.4.1, latest is 13.4.3

let me know if that doesn't fix it

[MathurAditya724]

Thank you for this but I am still having the same issue. I have updated the repo, you can have a look. I will ask them to re-open this issue on the next repo.

[aleczratiu]

Up.

Does anyone still have this issue?

[MathurAditya724]

Hey @aleczratiu, updating the next js version resolved my issue. Maybe try upgrading to the canary build if the problem still continues.

[aleczratiu]

Hey @MathurAditya724 I'm using monorepo, it seems that I had 2 @tanstak/react-query packages, one on the package.json from the root and another one inside of the website project. After I removed the package from the package.json root it seems not to complain anymore, not sure what the cause was there but it resolved my issue for now.