Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
BrunoQuagliata1 opened this issue Oct 29, 2024 · 3 comments

Comments

@BrunoQuagliata1
Copy link

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.

image image

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
Copy link

Ghernouz commented Nov 2, 2024

Same issues here any fix?

@beardsleym
Copy link

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

@kbrgl
Copy link

kbrgl commented Nov 8, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants