TypeScript Error: Slot Component Incompatibility with Next.js 15/React 19

[BrunoQuagliata1]

Bug report

Current Behavior

When using the Slot component from @radix-ui/react-slot in a Next.js 15 project (potentially related to React 19 compatibility), TypeScript throws type errors indicating that the Slot component cannot be used as a JSX element. This affects form components and other UI elements that utilize the Slot primitive.

Expected behavior

The Slot component should work correctly as a JSX element without TypeScript errors, maintaining compatibility with Next.js 15 and React 19.

Reproducible example

1. Create a Next.js 15 project

2. Install @radix-ui/react-slot

3. Try to use the Slot component in a form component like so:

import { Slot } from "@radix-ui/react-slot";
...
const FormControl = React.forwardRef<
  React.ElementRef<typeof Slot>,
  React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
  return (
    <Slot
      ref={ref}
      {...props}
    />
  );
});

Suggested solution

Additional context

This issue specifically affects form components that use the Slot primitive for composition. The error suggests there might be an incompatibility between the ReactNode types being used by Radix UI and those provided by React 19.

Your environment

    "next": "15.0.1",
    "react": "19.0.0-rc-69d4b800-20241021",
    "@radix-ui/react-slot": "^1.1.0",
    "react-dom": "19.0.0-rc-69d4b800-20241021",

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-slot	1.1.0
React	react/react-dom	19.0.0-rc-69d4b800-20241021
Browser
Assistive tech
Node	n/a
npm/yarn	pnpm
Operating System

[Ghernouz]

Same issues here any fix?

[beardsleym]

Yeh, I couldn't really think of anything other than
const Comp = asChild ? (Slot as any) : 'button';
Shh, don't tell anyone!!

[kbrgl]

Are y'all using bun? I think this is because bun doesn't support nested resolutions/overrides: oven-sh/bun#6608. Switching to PNPM fixed this for me.

[Sparticuz]

Could this be why my FormContext seems to be leaking to 'nested' forms in my Shadcn form?

edit: i don't think it's related.

[rshackleton]

This is a type mismatch issue local to your project, not something that could be resolved by radix-ui until they upgrade to React 19.

You can fix it locally by adding either resolutions for yarn or overrides for npm/pnpm.

// yarn
{
  "resolutions": {
    "@types/react": "npm:types-react@19.0.0-rc.1",
    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
  }
}

// npm/pnpm
{
  "overrides": {
    "@types/react": "npm:types-react@19.0.0-rc.1",
    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
  }
}

• https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides
• https://pnpm.io/package_json#pnpmoverrides
• https://yarnpkg.com/configuration/manifest/#resolutions