Property 'children' does not exist on type 'IntrinsicAttributes & RadioGroupItemProps & RefAttributes<HTMLButtonElement>

[akshay-nm]

Bug report

Current Behavior

Expected behavior

The code should work, its taken straight from the documentation page for Radix UI Radio Group primitive

Reproducible example

Suggested solution

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)	Radio Group	1.1.3
React	n/a
Browser
Assistive tech
Node	n/a
npm/yarn
Operating System

[joaom00]

It's probably an issue with your environment. I just tested it on a new vite project and it's working

[Alejandro-Larumbe]

A am getting the same error as well using @radix-ui/react-dropdown-menu": "^2.0.5 :
Environment: react: 18.2.0 nodejs 18.16.0 pnpm 8.4.0

[Alejandro-Larumbe]

The only way I could make this work was extending the type with the props I used, since TS was complaining about 'children', 'disabled', and 'className' not existing. Basically, it was complaining about every prop I passed to the component. This is hacky though, any insight into this issue?

interface ExtendedDropdownTriggerProps
  extends React.ComponentPropsWithRef<typeof DropdownTrigger> {
  children?: React.ReactNode
  disabled?: boolean
  className?: string
}

const ExtendedDropdownTrigger =
  DropdownTrigger as React.FC<ExtendedDropdownTriggerProps>

export const Trigger = ({ option, isPlaceholder, error, disabled }: Props) => (
  <ExtendedDropdownTrigger
    className={clsx([
      styles.trigger,
      isPlaceholder && styles.placeholder,
      error && styles.error,
      disabled && styles.disabled,
    ])}
    disabled={disabled}
  >
    {option.icon && <img src={getIconUrl(option.icon)} />}
    {option.label}
    {option.count && <span className={styles.count}>{option.count}</span>}
    <CaretIcon />
  </ExtendedDropdownTrigger>
)

[joaom00]

Do you have a reproduction so I can take a look?

[hoiheart]

@Alejandro-Larumbe @joaom00 I had a similar problem, but I removed the preserveSymlinks setting in tsconfig and it was resolved.

[akshay-nm]

I'm sorry guys, I don't have time to work on reproduction of this one. 😔

[nicobytes]

I had a similar problem!

I have downgraded to 1.0.0 and it works.

[palmithor]

I am experiencing this with quite a lot of components after I updated.

It's worth noting I am using bun.

[IShotTheSheriff]

This is caused by stricter typing used in modern react / typescript. As of writing this @radix-ui/primitives builds are dev dependent on "typescript": "^4.6.3" and "react": "^18.0.0". If you see issues with children missing there's a high chance your project uses typescript 5.x and react 18.2+. In those versions ForwardRefExoticComponent which is used under the hood will no longer accept children as default (typing became more strict).

So to unblock yourself you can override and augment @radix-ui types to accept children. You can do it close to your component implementation or in global.d.ts so it's available everywhere for your project.

Here's an example that does this for @radix-ui/react-tabs component.

// global.d.ts file

import { PropsWithChildren } from 'react'

declare module '@radix-ui/react-tabs' {
  export interface TabsProps extends PropsWithChildren {}
  export interface TabsListProps extends PropsWithChildren {}
  export interface TabsTriggerProps extends PropsWithChildren {}
  export interface TabsContentProps extends PropsWithChildren {}
}

Live example on how TS checks fail for newer versions of react/ts (note: it usually takes couple of seconds before ts error highlighting kicks in): https://playcode.io/1742302

Same example using extended interface (no more errors): https://playcode.io/1742302?v=2

[rohitpotato]

@IShotTheSheriff Any idea when this will be resolved?

[IShotTheSheriff]

@IShotTheSheriff Any idea when this will be resolved?

Hey sorry, no idea when this will be properly solved across all components just yet.

[benoitgrelard]

This is caused by stricter typing used in modern react / typescript. As of writing this @radix-ui/primitives builds are dev dependent on "typescript": "^4.6.3" and "react": "^18.0.0". If you see issues with children missing there's a high chance your project uses typescript 5.x and react 18.2+. In those versions ForwardRefExoticComponent which is used under the hood will no longer accept children as default (typing became more strict).

So to unblock yourself you can override and augment @radix-ui types to accept children. You can do it close to your component implementation or in global.d.ts so it's available everywhere for your project.

Here's an example that does this for @radix-ui/react-tabs component.

// global.d.ts file

import { PropsWithChildren } from 'react'

declare module '@radix-ui/react-tabs' {
  export interface TabsProps extends PropsWithChildren {}
  export interface TabsListProps extends PropsWithChildren {}
  export interface TabsTriggerProps extends PropsWithChildren {}
  export interface TabsContentProps extends PropsWithChildren {}
}

Live example on how TS checks fail for newer versions of react/ts (note: it usually takes couple of seconds before ts error highlighting kicks in): https://playcode.io/1742302

Same example using extended interface (no more errors): https://playcode.io/1742302?v=2

That might be the right answer, because we are a bit behind on types, etc.

[JonathanLorimer]

For anyone coming across this who needs additional props, you can use this PropsWith pattern (note that you need the generic and the P & bit for it to typecheck correctly:

import { PropsWithChildren, LabelHTMLAttributes } from 'react'

declare module "@radix-ui/react-label" {
  export type PropsWithLabelElement<P = unknown > = P & LabelHTMLAttributes
  export interface LabelProps extends PropsWithChildren, PropsWithLabelElement {}
}

[jgatjens-merge]

Had similar issue with the accordion component, my solutions was:

type AccordionProps = { children?: React.ReactNode; className?: string };

const AccordionItem = React.forwardRef<HTMLDivElement, AccordionProps>(...)