use:drg/use:draggable is not recognized by VS Code/TypeScript

[behrangsa]

Hi,

VS Code doesn't recognize use:drg as a valid attribute:

Is this a bug? Or am I missing something?

Thanks in advance.

[joeygrable94]

I am getting the same error message from my typescript eslint config:

type SortableItem = {
  item: number | string
}
const Sortable: Component<SortableItem> = (props) => {
  const sortable = createSortable(props.item)

  // ERROR: Type 'DragDropContext | null' must have a '[Symbol.iterator]()' method that returns an iterator.
  const [state] = useDragDropContext()

  return (
    <div
      // @ts-expect-error - allow directives
      use:sortable
      class={cn(
        "w-full p-4 bg-red-500 rounded-sm",
        sortable.isActiveDraggable ? "opacity-25" : "",
        state.active.draggable ? "transition-transform" : ""
      )}
    >
      {props.item}
    </div>
  )
}