SessionProvider typeError with next 15/react 19

[aquibbaig]

I just upgraded to Next 15/React 19 and found the following error with [email protected] & @auth/[email protected]

'SessionProvider' cannot be used as a JSX component.
  Its type '(props: SessionProviderProps) => Element' is not a valid JSX element type.
    Type '(props: SessionProviderProps) => Element' is not assignable to type '(props: any) => ReactNode'.
      Type 'Element' is not assignable to type 'ReactNode'.

Usage

'use client'
...
<SessionProvider>
   <ThemeProvider attribute="class" enableSystem disableTransitionOnChange>
      ...
    </ThemeProvider>
</SessionProvider>

[pepew-le-boss]

same error

[gadcam]

Actually it looks like it is a known issue we can see this in the code

next-auth/packages/next-auth/src/react.tsx

Lines 533 to 535 in 507aadd

	// @ts-expect-error
	<SessionContext.Provider value={value}>{children}</SessionContext.Provider>
	)

I think we have two workaround for this

• ignore the error with

  // @ts-expect-error - Known issue with Auth.js v5 + React 19 type definitions

• add a global.d.ts file at the root of the repository

import { Element } from 'react';

declare global {
  namespace JSX {
    // TOFIX: Remove this hack
    // Hack to allow `React.JSX.Element` to be used as a type
    interface Element extends React.JSX.Element {}
  }
}

I would rather go with the first option as it is more targeted.
But if you have this issue all over your codebase it might be a good thing to start with the global.d.ts solution to unlock the situation.
This might be linked with https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript