compatibility with React 19 #215
Description
I try to run this simple demo in typescript:
import { FileBrowser, FileList } from "chonky";
export default function FileExplorer() {
return (
<FileBrowser files={[]}>
<FileList />
</FileBrowser>
);
}
This snippet generates 2 errors:
The first is due to linting and already mentioned in #206; it can be rounded with the following import fix:
import { FileBrowser as F, FileList } from "chonky";
import type { FileBrowserProps, FileBrowserHandle } from "chonky";
const FileBrowser = F as React.MemoExoticComponent<React.ForwardRefExoticComponent<FileBrowserProps & React.RefAttributes<FileBrowserHandle> & { children?: React.ReactNode }>>;
The second is that, when I load the component, I obtain the following error in the console:
chonky.js?v=91ed2c8e:20466 Uncaught TypeError: ReactDOM.findDOMNode is not a function
at chonky.js?v=91ed2c8e:20466:32
at setRef2 (chonky.js?v=91ed2c8e:20412:5)
at chonky.js?v=91ed2c8e:20426:7
at commitAttachRef (react-dom_client.js?v=91ed2c8e:8628:63)
at runWithFiberInDEV (react-dom_client.js?v=91ed2c8e:1483:72)
at safelyAttachRef (react-dom_client.js?v=91ed2c8e:8642:11)
at commitLayoutEffectOnFiber (react-dom_client.js?v=91ed2c8e:9045:28)
at recursivelyTraverseLayoutEffects (react-dom_client.js?v=91ed2c8e:9680:13)
at commitLayoutEffectOnFiber (react-dom_client.js?v=91ed2c8e:8954:13)
at recursivelyTraverseLayoutEffects (react-dom_client.js?v=91ed2c8e:9680:13)
This is due to ReactDOM.findDOMNode which has been removed in React 19.
My dependencies are:
"chonky": "^2.3.2",
"chonky-icon-fontawesome": "^2.3.2",
"react": "^19.1.0",
"react-dom": "^19.1.0"