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

[wadehammes]

Describe the bug

This is happening in latest Next.js (13.4.0), not sure if this is a bug here or there, but starting here.

TypeError: Cannot read properties of null (reading 'useEffect')
--
16:31:35.649 | at exports.useEffect (/vercel/path0/node_modules/.pnpm/react@18.2.0/node_modules/react/cjs/react.production.min.js:24:292)
16:31:35.649 | at QueryClientProvider (file:///vercel/path0/node_modules/.pnpm/@tanstack+react-query@4.29.5_react-dom@18.2.0_react@18.2.0/node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs:46:9)

Your minimal, reproducible example

/

Steps to reproduce

1. Have a site running latest next.js 13.4.0
2. Use react-query

Expected behavior

Should not have the error. I think this might be a conflict of react peer dependency or something, not sure. Next made some changes to how they include React it seems in the latest release notes.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.4.0: Mon Mar 6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
Binaries:
Node: 18.16.0
npm: 9.5.1
Yarn: 1.22.19
pnpm: 8.4.0
Relevant packages:
next: 13.4.0
eslint-config-next: 13.4.0
react: 18.2.0
react-dom: 18.2.0

Tanstack Query adapter

None

TanStack Query version

4.29.5

TypeScript version

5.0.4

Additional context

This is happening in a preview/production build on Vercel, not locally.

[evanfreeze]

I'm seeing this issue too, but only when building for a deployment on Vercel. It seems to work fine when running or building locally.

[wadehammes]

@evanfreeze yes I meant to add that, same for me as well.

[wadehammes]

@evanfreeze vercel/next.js#49261

[EloB]

Could this have something todo with 'use client' string in the top of the file and pages/ next.js applications with custom server somehow messes up and tries to run hooks in SSR?

I mean useEffect is being ran on SSR which is completely wrong.
https://react.dev/reference/react/useEffect#caveats

The appDir fixed my error a bit but still having problem when I queue of requests while startup my next.js server. Like next dev and directly goto browser and send multiple requests before the server actually starts.

[isocroft]

Why has this issue been closed ? There is no resolution ? Just close it like that ? Why so arrogant ?

[wadehammes]

@isocroft it was a next issue, not a reacy query issue

[Athrun-Judah]

how to fix it? the same issue in 14.0.1

[rward-convoso]

This issue has come up for me when updating from v3 to v4.

[jeroenvanhattem]

I have the same issue with Next.js 14. Using the app router. Tanstack query is v5. All my components render on the client side. Has anyone found a fix for this yet?

[lchenneberg]

I have the same issue with Next.js 14. Using the app router. Tanstack query is v5. All my components render on the client side. Has anyone found a fix for this yet?

Dealing with the same issue here too...

[clayrisser]

I'm facing this issue on vite.

[heyitsarpit]

Facing this after upgrading to next 15 with --turbopack

[Q6Crypto]

Facing this after upgrading to next 15 with --turbopack

Same thing for me

[heyitsarpit]

Facing this after upgrading to next 15 with --turbopack

Same thing for me

if you're using the pages router, you can fix this by downgrading react to v18. this error seems to happen due to react 19 not next 15.

[Gustavo-KnowMe]

Happening to me too.
"next": "15.1.6",
"react": "^19.0.0"

Why is this closed?