Type Error (React 18.2.0)

[lewismazzei]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

I got the following error:

Type error: Type '{ children: Element[]; split: "vertical"; minSize: number; defaultSize: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<SplitPane> & Pick<Readonly<SplitPaneProps>, never> & InexactPartial<...> & InexactPartial<...>'.
  Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<SplitPane> & Pick<Readonly<SplitPaneProps>, never> & InexactPartial<...> & InexactPartial<...>'.

   7 | const Home: NextPage = () => {
   8 |   return (
>  9 |     <SplitPane split='vertical' minSize={50} defaultSize={100}>
     |      ^
  10 |       <div />
  11 |       <div />
  12 |     </SplitPane>

Here is the diff that solved my problem:

diff --git a/node_modules/react-split-pane/index.d.ts b/node_modules/react-split-pane/index.d.ts
index d116f54..3c7eb24 100644
--- a/node_modules/react-split-pane/index.d.ts
+++ b/node_modules/react-split-pane/index.d.ts
@@ -5,6 +5,7 @@ export type Size = string | number;
 export type Split = 'vertical' | 'horizontal';
 
 export type SplitPaneProps = {
+  children: React.ReactNode[],
   allowResize?: boolean;
   className?: string;
   primary?: 'first' | 'second';

This issue body was partially generated by patch-package.

[OldManMeta]

@lewismazzei thanks for your post - I just hit the same issue, and it's all starting to drive me a little nuts.

I haven't used patch-package before - can you briefly explain how you used it to fix this issue?

Many thanks

[OldManMeta]

Actually - I just found a new split panel package that works nicely with React 18

It's also being actively maintained by the look of it:

https://github.com/johnwalley/allotment

[lewismazzei]

Actually - I just found a new split panel package that works nicely with React 18

It's also being actively maintained by the look of it:

https://github.com/johnwalley/allotment

Oh brilliant! I'm going to use this instead too.

[lewismazzei]

@lewismazzei thanks for your post - I just hit the same issue, and it's all starting to drive me a little nuts.

I haven't used patch-package before - can you briefly explain how you used it to fix this issue?

Many thanks

I used patch-package following the instructions found in the README:

# fix a bug in one of your dependencies
vim node_modules/some-package/brokenFile.js

# run patch-package to create a .patch file
npx patch-package some-package

# commit the patch file to share the fix with your team
git add patches/some-package+3.14.15.patch
git commit -m "fix brokenFile.js in some-package"

So in this case I just:

• modified node_modules/react-split-pane/index.d.ts to include the children prop as above
• ran npx patch-package react-split-pane --create-issue*
• ran git add patches/react-split-pane+0.1.92.patch
• ran git commit -m "fix index.d.ts in react-split-pane"

*Upon first running the patch-package command it suggested I add the --create-issue option to create this issue!

[OldManMeta]

@lewismazzei thanks for walking through that, much appreciated. Cheers

[vimalsharma124]

https://www.npmjs.com/package/resizable-panes-react
I found another, it is lighter