nextauthjs
Fix: React 19 & Next.js 15 Compatibility Issue: "Cannot read properties of null (reading 'useState')"
Environment
System:
OS: Windows 10 10.0.19045
CPU: (2) x64 Intel(R) Pentium(R) 3805U @ 1.90GHz
Memory: 645.19 MB / 3.91 GB
Binaries:
Node: 20.18.3 - C:\Program Files\nodejs\node.EXE
npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
pnpm: 10.5.2 - ~\AppData\Roaming\npm\pnpm.CMD
bun: 1.2.4 - ~\AppData\Roaming\npm\bun.CMD
Browsers:
Edge: Chromium (133.0.3065.92)
Internet Explorer: 11.0.19041.4355
npmPackages:
next: 15.2.1 => 15.2.1
next-auth: ^4.24.11 => 4.24.11
react: ^19.0.0 => 19.0.0
Reproduction URL
https://github.com/abhishekkumar35/nextauth-react19-nextjs15-compatibility-issue
Describe the issue
Description
When using next-auth (v4.24.11) with React 19 and Next.js 15, I'm encountering a runtime error related to React hooks. The error occurs when the SessionProvider component from next-auth attempts to use hooks with the newer React architecture. Error Message
Unhandled Runtime Error
Error: Cannot read properties of null (reading 'useState')
Call Stack 7
Show 5 ignore-listed frames
process.env.NODE_ENV.exports.useState
node_modules\react\cjs\react.development.js (1500:33)
SessionProvider
node_modules\next-auth\react\index.js (371:32)
Code Example
// lib/ClientProvider.tsx
"use client";
import { SessionProvider } from "next-auth/react";
export default function ClientProvider({children}:{children:React.ReactNode}){
return (
<SessionProvider session={null}>
{children}
</SessionProvider>
)
}
// app/layout.tsx
// ...
return (
<html lang="en">
<body>
<ClientProvider>
<main>
<Navbar />
{children}
</main>
</ClientProvider>
</body>
</html>
);
What I've Tried
Added the session={null} prop to SessionProvider
Verified that all client components using hooks are properly marked with "use client"
Ensured proper configuration of next-auth
Additional Context
The issue seems to be related to the architectural changes in React 19. Downgrading to React 18.2.0 resolves the issue, but I'd like to understand if there are plans to support React 19 compatibility in an upcoming release of next-auth.
Questions
Is there a workaround to use next-auth with React 19 currently?
Is there a timeline for React 19 support in next-auth?
Thank you for your time and consideration!
How to reproduce
git clone "reproduction url provided" cd "cloned directory" npm i npm run dev
Expected behavior
The expected behavior is that next-auth should work seamlessly with React 19 and Next.js 15 without producing runtime errors.
No console errors related to invalid hook calls or React internals should appear during normal operation.
Expect a library like next-auth to maintain compatibility with new major versions of React and Next.js either through timely updates or clear documentation about version constraints. If temporary incompatibility exists, clear error messages indicating version mismatch would be preferable to runtime errors.
Hi, we're using [email protected] and I'm preparing us for React 19 upgrade. Is next-auth a blocker then, at least for now?
I am facing the same issue with React 19 and Next.JS 15. Any updates on this? @balazsorban44 ?
I'm having this problem too. Interestingly, it didn't happen immediately - when I first upgraded to nextjs v15 and react v19 a while ago, and there were actually no problems that I recall. When I upgraded to react v19.1, the session hook stopped working...
