[React 19] React.ReactElement with cloneElement - No overload matches this call.

[rwieruch]

As far as I know, React.ReactElement changed from any to unknown in React 19. I worked for most of the year with canary versions of Next and React where everything was typed correctly, but it seems that the type change was a more recent addition?

    "next": "^15.1.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "@types/react": "^19.0.1",
    "@types/react-dom": "^19.0.2",

My case: After upgrading my application to the most recent versions, I get type errors for React.ReactElement used in React's cloneElement method. So I have a type which defines an element:

type Item = {
  icon: React.ReactElement;
};

And I use it in cloneElement where I also provide a className:

{cloneElement(navItem.icon, {
  className: "h-5 w-5",
})}

Here I get the type error: No overload matches this call. Object literal may only specify known properties, and 'className' does not exist in type 'Partial<unknown> & Attributes'.

So if I remove the className everything works fine.

{cloneElement(navItem.icon)}

I tried using React.ReactNode and isValidElement as guard, but it led me to the same type error. How would I solve this in React 19?

Not sure if it is related to this issue: #31357

[eps1lon]

Do you have a minimal repro? A TypeScript Playground would be ideal.

[thewebartisan7]

Do you have a minimal repro? A TypeScript Playground would be ideal.

Check this https://www.typescriptlang.org/play/#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wG4AocpAD0ljhgE8wk4A5FANwEkYk8AvHADe5OHGBoIAOwBciYjAB0ydDACiAG35JpMADyqMSgMK5I03TAAKOMAGcA6sBgALCAFcYyTPvz3OAHN8AD4QinFJGQAmeSNleK0dPQoAXwpyJhY4AGVgABMkACMUKF5+WwgHOCFRcWkucpB5Dh4+EDSMqWl7eDzCkrL2mrgACmE4Brb+OFT5fuLSpsqHAEoakJExOCIYDyhpMe3xfRDj8RF4pTRNGSQkkCtRqaalKOkAGi2Ln4ublHs9g4j3k+FcAFoAKxwADuUPwH3OP1Sq1SlF+l0U11ulgeTxe7Te3WiXzqGL+mgBQJQIIIEOhcMhCKRFxRaJ++gA9GdxKtOkA

[thewebartisan7]

I also found this PR with a section in the description about this change.

Quote:

The props of React elements now default to unknown instead of any if the element is typed as ReactElement. This does not affect you if you pass a type argument to ReactElement:

type Example2 = ReactElement<{ id: string }>["props"];
//   ^? { id: string }
But if you relied on the default, you now have to handle unknown:

type Example = ReactElement["props"];
//   ^? Before, was 'any', now 'unknown'

[eps1lon]

As @thewebartisan7 said, this is intended behavior. You'd want to use

-  icon2: React.ReactElement;
+  icon2: React.ReactElement<any>;

instead.