I've been using react-beautiful-dnd for a while in my project, but recently I'm getting this following error
Type '
{ children: string; className: string; style: { whiteSpace: "nowrap"; textOverflow: string; width: string; }; } | { children: string; onMouseDown: (event: MouseEvent<any, MouseEvent>) => void; ... 10 more ...; style: { ...; }; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'.
Type '{ children: string; onMouseDown: (event: MouseEvent<any, MouseEvent>) => void; onKeyDown: (event: KeyboardEvent<any>) => void; onTouchStart: (event: TouchEvent<any>) => void; onTouchMove: (event: TouchEvent<...>) => void; ... 7 more ...; style: { ...; }; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'.
Type '{ children: string; onMouseDown: (event: MouseEvent<any, MouseEvent>) => void; onKeyDown: (event: KeyboardEvent<any>) => void; onTouchStart: (event: TouchEvent<any>) => void; onTouchMove: (event: TouchEvent<...>) => void; ... 7 more ...; style: { ...; }; }' is not assignable to type 'HTMLAttributes<HTMLHeadingElement>'.
Types of property 'onDragStart' are incompatible.
Type '(event: DragEvent<any>) => void' is not assignable to type '(event: DragEvent<HTMLHeadingElement>) => void'.
Types of parameters 'event' and 'event' are incompatible.
Type 'DragEvent<HTMLHeadingElement>' is missing the following properties from type 'DragEvent<any>': detail, view TS2322
My Component structure is like this
<>
<Draggable
draggableId={props.column._id ? props.column._id.toString() : "0"}
index={props.index}
>
{(provided) => (
<div
className="dib h-100 w-23-l w-50-m"
style={{ minWidth: "270px" }}
{...provided.draggableProps}
ref={provided.innerRef}
>
<div className="flex flex-column h-100 pr3 w-100">
<div className="w-100">
<div className="flex pb1 w-100">
<h3
className="pl1 overflow-hidden ma0 fw6 flex-grow-1 ws-normal ws-break pv1"
style={{
whiteSpace: "nowrap",
textOverflow: "ellipsis",
width: "220px",
}}
{...provided.dragHandleProps}
>
{props.column.name}
</h3>
At first I thought this was an issue with the package, but it was working fine all along and now it's throwing me this error. Any idea how I can solve this one?
