The slot stops working in Server Component React

[Qbason]

Bug report

I am using shadcn component Button which looks like this:

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
	({ className, variant, size, asChild = false, ...props }, ref) => {
		const Comp = asChild ? Slot : "button";
		return (
			<Comp
				className={cn(buttonVariants({ variant, size, className }))}
				ref={ref}
				{...props}
			/>
		);
	}
);
Button.displayName = "Button";

And use it in my code ( in my server component react page ) like this:

	<Button variant="outline" size="sm" asChild>
		<Link
			href={`somePath`}
		>
			{t("common.view")}
		</Link>
	</Button>

From version 1.2.2 of "@radix-ui/react-slot"
Server Page generate nothing no html element (lack of link element)
The slot made it to be disappeared
Back to 1.2.0 solve the issue

Workaround

I just made the Button the child of the Link and it works and is okey to avoid using slot.
I will stay with that. I just have wanted to mention it to help maintain the package :)

Your environment

packages:
"@radix-ui/react-slot": "1.2.2",
"react": "^19.0.0",
"next": "^15.2.5",

Important info

I see that this issue doesn't appear in client component ("use client")

[CarlosDeucherMoretoCont]

I'm running this issue in react-slot 1.2.0, but using the Slot.Slottable component. It returns the following error:

Error: React.Children.only expected to receive a single React element child.

The issue is solved using the "use client" directive.

[graemegeorge]

Having same issue as @CarlosDeucherMoretoCont. I have replicated the issue in a codesandbox to debug the issue more clearly https://codesandbox.io/p/devbox/phnz74

Since marking consumers as client isn't viable enough, I'll be dropping the radix slot version to 1.2.0 (appears to be last working version on this setup at least) until @radnan fix goes in!

[matias3981]

I noticed this error too on version 1.2.3. The thing is, it doesn't matter even if I pass a single element. Any help here @radnan ?

Having same issue as @CarlosDeucherMoretoCont. I have replicated the issue in a codesandbox to debug the issue more clearly https://codesandbox.io/p/devbox/phnz74

Since marking consumers as client isn't viable enough, I'll be dropping the radix slot version to 1.2.0 (appears to be last working version on this setup at least) until @radnan fix goes in!

[radnan]

can you paste the code that's causing the issue @matias3981 ? this should be fixed now as the change was reverted in v1.2.3 in #3554

[matias3981]

can you paste the code that's causing the issue @matias3981 ? this should be fixed now as the change was reverted in v1.2.3 in #3554

Here is the component where I'm using the Slot component:

import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { cva, type VariantProps } from 'class-variance-authority';
import { LoadingSpinner } from './loading-spinner';

import { cn } from '@/lib/utils';

const buttonVariants = cva('css_classnames_have_been_removed');

export interface ButtonProps
	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
		VariantProps<typeof buttonVariants> {
	asChild?: boolean;
	loading?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
	(
		{
			className,
			variant,
			size,
			asChild = false,
			loading = false,
			children,
			disabled,
			...props
		},
		ref
	) => {
		const Comp = asChild ? Slot : 'button';
		return (
			<Comp
				className={cn(buttonVariants({ variant, size, className }))}
				ref={ref}
				disabled={disabled || loading}
				{...props}
			>
				{loading && <LoadingSpinner size='sm' />}
				{children}
			</Comp>
		);
	}
);
Button.displayName = 'Button';

export { Button, buttonVariants };

If I use this component asChild and pass it any tag, I get the React children error.

[radnan]

can you paste the code that's causing the issue @matias3981 ? this should be fixed now as the change was reverted in v1.2.3 in #3554

Here is the component where I'm using the Slot component:

import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { cva, type VariantProps } from 'class-variance-authority';
import { LoadingSpinner } from './loading-spinner';

import { cn } from '@/lib/utils';

const buttonVariants = cva('css_classnames_have_been_removed');

export interface ButtonProps
	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
		VariantProps<typeof buttonVariants> {
	asChild?: boolean;
	loading?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
	(
		{
			className,
			variant,
			size,
			asChild = false,
			loading = false,
			children,
			disabled,
			...props
		},
		ref
	) => {
		const Comp = asChild ? Slot : 'button';
		return (
			<Comp
				className={cn(buttonVariants({ variant, size, className }))}
				ref={ref}
				disabled={disabled || loading}
				{...props}
			>
				{loading && <LoadingSpinner size='sm' />}
				{children}
			</Comp>
		);
	}
);
Button.displayName = 'Button';

export { Button, buttonVariants };

If I use this component asChild and pass it any tag, I get the React children error.

You can't have multiple children when using Slot - check out Slottable to achieve what you're trying.