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(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

This is the error I am getting Type FC<ChonkyIconProps> is not assignable to type ElementType<ChonkyIconProps> | 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 (
        <div style={{ height: 300 }}>
            <FullFileBrowser files={files}></FullFileBrowser>
        </div>
    );
};

export default ChonkyFileBrowser;

But I get this error:

'FullFileBrowser' cannot be used as a JSX component.
  Its type 'MemoExoticComponent<ForwardRefExoticComponent<FileBrowserProps & RefAttributes<FileBrowserHandle>>>' is not a valid JSX element type.

These are my packages:

├── @types/[email protected]
├── @types/[email protected]
├── @typescript-eslint/[email protected]
├── @typescript-eslint/[email protected]
├── @vitejs/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

[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>>>;