Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: React 19 & Next.js 15 Compatibility Issue: "Cannot read properties of null (reading 'useState')" #12757

Open
abhishekkumar35 opened this issue Mar 10, 2025 · 0 comments
Open

Fix: React 19 & Next.js 15 Compatibility Issue: "Cannot read properties of null (reading 'useState')" #12757

abhishekkumar35 opened this issue Mar 10, 2025 · 0 comments
Labels
bug Something isn't working triage Unseen or unconfirmed by a maintainer yet. Provide extra information in the meantime.

Comments

@abhishekkumar35
Copy link

abhishekkumar35 commented Mar 10, 2025 •
edited
Loading

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.
@abhishekkumar35 abhishekkumar35 added bug Something isn't working triage Unseen or unconfirmed by a maintainer yet. Provide extra information in the meantime. labels Mar 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working triage Unseen or unconfirmed by a maintainer yet. Provide extra information in the meantime.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@abhishekkumar35