ReactI18NextChild typescript problem

[alexstock1]

trafficstars

We are using i18n and encountering some issues during TypeScript checks.

node_modules/react-arborist/src/components/list-outer-element.tsx:22:7 - error TS2322: Type 'ReactI18NextChild | Iterable<ReactI18NextChild>' is not assignable to type 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | Record<...> | null | undefined'.
  Type 'Iterable<ReactI18NextChild>' is not assignable to type 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | Record<...> | null | undefined'.
    Type 'Iterable<ReactI18NextChild>' is not assignable to type 'ReactFragment'.
      Type 'ReactI18NextChild' is not assignable to type 'ReactNode'.
        Type 'Record<string, unknown>' is not assignable to type 'ReactNode'.
          Type 'Record<string, unknown>' is not assignable to type 'ReactPortal'.

22       {children}
         ~~~~~~~~~~

To resolve this error, you need to update the following file: src/components/list-outer-element.tsx

export const ListOuterElement = forwardRef(function Outer(
  props: React.HTMLProps<HTMLDivElement> & { children?: React.ReactNode },
  ref
) {
  const { children, ...rest } = props;
  const tree = useTreeApi();
  return (
    <div
      // @ts-ignore
      ref={ref}
      {...rest}
      onClick={(e) => {
        if (e.currentTarget === e.target) tree.deselectAll();
      }}
    >
      <DropContainer />
      {children}
    </div>
  );
});

For those experiencing this issue, here is the file path:

diff --git a/node_modules/react-arborist/src/components/list-outer-element.tsx b/node_modules/react-arborist/src/components/list-outer-element.tsx
index 672419e..276539a 100644
--- a/node_modules/react-arborist/src/components/list-outer-element.tsx
+++ b/node_modules/react-arborist/src/components/list-outer-element.tsx
@@ -4,7 +4,7 @@ import { treeBlur } from "../state/focus-slice";
 import { Cursor } from "./cursor";
 
 export const ListOuterElement = forwardRef(function Outer(
-  props: React.HTMLProps<HTMLDivElement>,
+  props: React.HTMLProps<HTMLDivElement> & { children?: React.ReactNode },
   ref
 ) {
   const { children, ...rest } = props;

Hopefully, the maintainer of this library will apply a fix soon.

[jameskerr]

Is this still a problem after the release of v3.4.1?