Typescript warning with React 18 types

[michaeltford]

Describe the bug

When using with @types/react": "^18.0.15 a typescript warning is produced.

This is easily resolved by adding to the Props definition.

children: React.ReactNode; // 👈️ added type for children

[Timmmm]

It would help if you included the actual warning. I assuming its the same thing I'm getting:

Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<SplitPane> & Pick<Readonly<Props>, never> & InexactPartial<...> & InexactPartial<...>'.

Although that is an error, not a warning (not sure Typescript even has warnings).

[johnflux]

Is there any workaround for this?

[michaeltford]

@Timmmm . Yes, that's the message and you are correct that it's an error. I fixed this by forking and adding

children: React.ReactNode;

to SplitPaneProps in index.d.ts.

@johnflux I don't know of any workarounds but you could ignore using the react syntax below. (Note - it's 2 lines and will then ignore ALL typescript errors for SplitPane)

    {/* this lib is incompatible with react18. To fix     // children: React.ReactNode; needs to be added to SplitPaneProps.
     // @ts-ignore TS2322 */}
    <SplitPane>

[Timmmm]

Yeah I also just used {/* @ts-ignore */}.

[yhusynin]

Faced with the same issue, here is an example that I've found https://codesandbox.io/s/wr0gf

[dturcotte]

Here's the react 18 doc reference, children has to be added explicitly to props: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-typescript-definitions

[HristoP96]

So nobody is going to fix this small issue ?

[vimalsharma124]

facing similar issue

[vimalsharma124]

Found solution

https://www.npmjs.com/package/resizable-panes-react