Tabs component does not work with @types/[email protected]

[lukeberry99]

Hi, I've just upgraded my project from Next 13 to Next 14 and this involved bumping my react and react types from 18.2.20 to 18.2.33 and this has broken the tabs with the below error:

1. 'Tabs' cannot be used as a JSX component.
     Its type 'ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>>' is not a valid JSX element type.
       Type 'ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
         Type 'import("/[...]/node_modules/@radix-ui/react-slot/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
           Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
             Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'. [2786]

[TobysNap]

Hi! I had the same problem in a button component and I was able to fix it adding this to the component. I added a closing tag so that children can be assigned to the element and the property is no longer missing. I clicked the line referring to the code position in the error so that I could find the component that needed to be modified I'm not sure if it's the best approach but it worked in my case

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}
      >
      // I added a closing tag
      </Comp>
    )
  }
)

[SamHep0803]

+1 Having this issue as well.

[thisislvca]

+1 Same issue on the button component

[ImBIOS]

Solved:

• https://github.com/shadcn-ui/ui/issues/1978#issuecomment-1873574838

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.