craft.js
craft.js copied to clipboard
Typescript error: connectors does not accept the null parameter.
Describe the bug When I write the simplest example code in typescript, I get the following error:
import {useNode} from "@craftjs/core";
import Button from '@mui/material/Button';
export const MyComponent = () => {
const {connectors: {connect, drag}} = useNode();
return <Button ref={ref => connect(drag(ref))}/>;
}
TS2345: Argument of type Â
HTMLButtonElement | null
 is not assignable to parameter of typeHTMLElement | ReactElement<any, string | JSXElementConstructor<any>>
Type Ânull
 is not assignable to typeHTMLElement | ReactElement<any, string | JSXElementConstructor<any>>
I think the reason for this error is that the connector methods do not accept null as argument, but the ref
can actually be null:
Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). See also: https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
file: @types/react/index.d.ts
To Reproduce
Expected behavior
Screenshots
Additional context
Your environment
Software | Version(s) |
---|---|
craft.js | 0.2.2 |
React | 18.2.0 |
TypeScript | 5.2.2 |
Browser | - |
npm/Yarn | - |
Operating System | - |
Indeed, I do know how to get around this problem, i.e. write drag(ref!)
instead.
But I'm concerned that craft.js doesn't do anything special with null values, which could lead to problems that are currently invisible but could be far-reaching.