Next.js Discord

Discord Forum

getting `X cannot be used as a JSX component.`

Unanswered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
I recently upgraded a project from next 13 to 15 and many of my components stopped working because of the error in the title.

My nextjs version is 15.1.6
typescript is 5.8.2

I'm currently developing in a monorepo (turborepo) with mostly stock settings.

The full error is:
'Button' cannot be used as a JSX component.
  Its type 'ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>' is not a valid JSX element type.
    Type 'ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>' is not assignable to type '(props: any) => ReactNode | Promise<ReactNode>'.
      Type 'ReactNode' is not assignable to type 'ReactNode | Promise<ReactNode>'.
        Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode | Promise<ReactNode>'.
          Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2786)
index.d.ts(387, 9): 'children' is declared here.

4 Replies

American black bearOP
I'm also using shadcn canary for the components
I'm only getting the type error by the way, the code itself seems to be working
Catla
Most probably the error is because of Next-15 and React-19 no longer needs ref to be explicitly passed down the component, it automatically gets passed along with other props. As you are using Shadcn and that is initialized when project was Next-13, the shadcn initialized according to that version. And for this reason the type error is occuring.
LuisLl
Does this only happen for components wrapped in Forward Ref or types as React Components with Ref??

My thought is this might be because React 19 no longer needs you to pass ref as a second argument to your components, you don’t need Forward Ref anymore since refs get passed as props now.