Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ReactI18NextChild typescript problem #277

Open
alexstock1 opened this issue Oct 8, 2024 · 0 comments
Open

ReactI18NextChild typescript problem #277

alexstock1 opened this issue Oct 8, 2024 · 0 comments

Comments

@alexstock1
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant