"Link" cannot be used as a JSX component

Question

I started a new nextjs project a few weeks ago (15.5.0) using turbopack. Today I went to use the Link component but I am getting the following typescript error:

Link' cannot be used as a JSX component.
  Its type '<RouteType>(props: LinkProps<RouteType>) => Element' is not a valid JSX element type.
    Type '<RouteType>(props: LinkProps<RouteType>) => Element' is not assignable to type '(props: any) => ReactNode | Promise<ReactNode>'.
      Type 'Element' is not assignable to type 'ReactNode | Promise<ReactNode>'.
        Property 'children' is missing in type 'ReactElement<any, any>' but required in type 'ReactPortal'.ts(2786)

I have searched around in the git issues, but all I could find was an issue related to deno which was solved by ensuring that "moduleResolution": "bundler" was set in the tsconfig.json.

I dont seem to be getting the type error for any of my own components, but any built-in nextjs component (link, form, etc) seems to throw the error.

Is there something that I have overlooked?

Giant panda · Answer

The most likely fix for this is to adjust the tsconfig json file. Next.js 15 and newer versions use a different approach for handling React and JSX. The key is to ensuree that the compiler knows it is working in a client component environment.
Add or update the following line in your tsconfig.json

{
"compilerOptions": {
"jsx": "react-jsx"
}
}

Hope this helps

"Link" cannot be used as a JSX component

1 Reply