Cannot use FullFileBrowser component (Chonky v2.3.2 with React 18)

[AbbasRam]

1. On my main.tsx file where I setChonkyDefaults I get a compiler error: This is my main.tsx file:

   
   import React, { FC } from "react";
   import ReactDOM from "react-dom/client";
   import App from "./App.tsx";
   import { setChonkyDefaults } from "chonky";
   import { ChonkyIconFA } from "chonky-icon-fontawesome";
   import "./index.css";

setChonkyDefaults({ iconComponent: ChonkyIconFA });

ReactDOM.createRoot(document.getElementById("root")!).render(

); ``` This is the error I am getting ```Type FC is not assignable to type ElementType | undefined.``` 2. I have created a default component for browser called ChonkyFileBrowser: ``` import { FullFileBrowser } from "chonky"; export const ChonkyFileBrowser = () => { const files = [ { id: "lht", name: "Projects", isDir: true }, { id: "mcd", name: "chonky-sphere-v2.png", thumbnailUrl: "https://chonky.io/chonky-sphere-v2.png", }, ]; return (

); }; export default ChonkyFileBrowser; ``` But I get this error: ``` 'FullFileBrowser' cannot be used as a JSX component. Its type 'MemoExoticComponent>>' is not a valid JSX element type. ``` These are my packages: ``` ├── @types/react-dom@18.2.19 ├── @types/react@18.2.55 ├── @typescript-eslint/eslint-plugin@6.21.0 ├── @typescript-eslint/parser@6.21.0 ├── @vitejs/plugin-react@4.2.1 ├── chonky-icon-fontawesome@2.3.2 ├── chonky@2.3.2 ├── eslint-plugin-react-hooks@4.6.0 ├── eslint-plugin-react-refresh@0.4.5 ├── eslint@8.56.0 ├── react-dom@18.2.0 ├── react@18.2.0 ├── tsdef@0.0.14 ├── typescript@5.3.3 └── vite@5.1.3 ```

[OrhanTozan]

Workaround for this:

setChonkyDefaults({ iconComponent: ChonkyIconFA as any });

[NikoEscobar]

The workaround stated in the comment above works for the first issue mentioned

For the second issue, it appears to be related to compatibility with React v18.

[OrhanTozan]

Workaround for second issue:

const _FullFileBrowser = FullFileBrowser as any;

export const MyFileBrowser = () => {
  const files = [
    { id: "lht", name: "Projects", isDir: true },
    {
      id: "mcd",
      name: "chonky-sphere-v2.png",
      thumbnailUrl: "https://chonky.io/chonky-sphere-v2.png",
    },
  ];
  const folderChain = [{ id: "xcv", name: "Demo", isDir: true }];
  return (
    <div style={{ height: 300 }}>
      <_FullFileBrowser files={files} folderChain={folderChain} />
    </div>
  );
};

[MikeLegemah5799]

@OrhanTozan thank you so much. I just had this same error.

[atomiechen]

For the second issue, I used the following for better intellisense experience in vscode:

import { FullFileBrowser as F, FileBrowserProps, FileBrowserHandle } from 'chonky';
const FullFileBrowser = F as React.MemoExoticComponent<React.ForwardRefExoticComponent<FileBrowserProps & React.RefAttributes<FileBrowserHandle>>>;