React 18 typescript problem

[vocko]

React has recently released version 18 and along with it also a tightened type checking. This results in many error related to the children property on components.

 TS2769: No overload matches this call.
 Overload 1 of 2, '(props: ReflexElementProps | Readonly<ReflexElementProps>): ReflexElement', gave the following error.
<e>     Type '{ children: never[]; key: string; direction: -1; ref: MutableRefObject<ReflexElement | null>; className: any; size: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ReflexElement> & Readonly<ReflexElementProps>'.
<e>       Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReflexElement> & Readonly<ReflexElementProps>'.
<e>   Overload 2 of 2, '(props: ReflexElementProps, context: any): ReflexElement', gave the following error.
<e>     Type '{ children: never[]; key: string; direction: -1; ref: MutableRefObject<ReflexElement | null>; className: any; size: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ReflexElement> & Readonly<ReflexElementProps>'.
<e>       Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReflexElement> & Readonly<ReflexElementProps>'.

 TS2769: No overload matches this call.
<e>   Overload 1 of 2, '(props: ReflexContainerProps | Readonly<ReflexContainerProps>): ReflexContainer', gave the following error.
<e>     Type '{ children: Element[]; key: string; orientation: "horizontal"; style: { height: number; }; windowResizeAware: true; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ReflexContainer> & Readonly<ReflexContainerProps>'.
<e>       Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReflexContainer> & Readonly<ReflexContainerProps>'.
<e>   Overload 2 of 2, '(props: ReflexContainerProps, context: any): ReflexContainer', gave the following error.
<e>     Type '{ children: Element[]; key: string; orientation: "horizontal"; style: { height: number; }; windowResizeAware: true; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ReflexContainer> & Readonly<ReflexContainerProps>'.
<e>       Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReflexContainer> & Readonly<ReflexContainerProps>'.

I'm not a typescript expert but seems to me like children now has to be explicitly defined as a prop type.

[leefsmp]

I will take a look at this asap ...

[akphi]

Hi, is there any update on this?

[AnabelSalomone]

@leefsmp Does the fact that renderOnResizeRate is not usable has to do with this issue? (type problem) Or should I open a new issue?

This is the error I get:
Property 'renderOnResize' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReflexElement> & Readonly<ReflexElementProps> & Readonly<...>'.t (sorry, the error is truncated)

[leefsmp]

@akphi check version 4.0.8 please. ts definition should now be up-to-date. @AnabelSalomone, renderOnResizeRate was removed from the code as it caused problems, sorry for the bad news. I would need to look into it again at some point. If you have troubles with resizing, log an issue pls.

[Entkenntnis]

Thank you for fixing this! I can confirm that 4.0.8 is working fine with react 18 and next.js 12