react-beautiful-dnd - Invariant failed: Cannot find droppable entry with id

Question

I was following along with a react-beautiful-dnd tutorial that uses react component classes instead of hooks. I was writing an equivalent program with modern react syntax when I came across this error. Invariant failed: Cannot find droppable entry with id [column-1]. I was trying to dynamically update a variable that stores the origin column index to prevent the user from dragging a task to an earlier column. The error occurred when I attempted to use a useState hook inside of an onDragStart function. I have created a codeSandbox showing the problem and would be very thankful for any help.

Answer 1

Instead of importing the "Dropable" form from "react-beautiful-dnd", you can use this custom component as a replacement:

import { useEffect, useState } from "react";
import { Droppable, DroppableProps } from "react-beautiful-dnd";
export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
  const [enabled, setEnabled] = useState(false);
  useEffect(() => {
    const animation = requestAnimationFrame(() => setEnabled(true));
    return () => {
      cancelAnimationFrame(animation);
      setEnabled(false);
    };
  }, []);
  if (!enabled) {
    return null;
  }
  return <Droppable {...props}>{children}</Droppable>;
};

Credit for the TypeScript version goes to GiovanniACamacho and Meligy on GitHub.