Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why is ClerkProvider not working in Next.js 14 and showing "cannot be used as a JSX component"?

I am trying to integrate Clerk into my Next.js 14 app by wrapping the RootLayout in the ClerkProvider. However, I keep encountering this error:

‘ClerkProvider’ cannot be used as a JSX component. Its type ‘(props:
Without<NextClerkProviderProps,
"__unstable_invokeMiddlewareOnAuthStateChange">) => Promise’
is not a valid JSX element type. Type ‘(props:
Without<NextClerkProviderProps,
"__unstable_invokeMiddlewareOnAuthStateChange">) => Promise’
is not assignable to type ‘(props: any, deprecatedLegacyContext?: any)
=> ReactNode’. Type ‘Promise’ is not assignable to type ‘ReactNode’

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body
          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        >
          {children}
        </body>
      </html>
    </ClerkProvider>
  );
}

I have already:

  • Followed official documentation
  • Installed the latest version of @clerk/nextjs using npm install @clerk/nextjs@latest.
  • Verified that my Next.js version is 14 and the app directory is being used.
  • Configured middleware.ts for Clerk.

Thanks in advance

Tags:

2

Answers


  1. 0

    Update to react 19 and latest version of clerk

    npm install --save-exact react@^19.0.0 react-dom@^19.0.0 --legacy-peer-deps
    Login or Signup to reply.
  2. 0

    I am having the same error. It seems like NextJS v14.2 have changed the types definitions and @clerk/nextjs is not able to catch up.

    I would say, give it a few days until clerk team release a minor update to fix this linting error.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search