8

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.

Matthew Roloff
  • 81
  • 1
  • 2

5 Answers5

15

just remove React.strictMode tag on your index.jsx/index.tsx file

Jonathan Mwaniki
  • 196
  • 1
  • 2
7

Try removing React's strict mode.

Rizwan Liaqat
  • 81
  • 2
  • 4
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 17 '22 at 05:41
6

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.

Aurimas Gaidys
  • 71
  • 1
  • 3
1

Try to remove React.StrictMode in index.js/ index.ts I have try and it fix my issue

LAVI SAR
  • 11
  • 2
0

For me changing the way I render the root/App from:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

to this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

seemed to do the trick. Not sure if an issue with newer version of React.

Jonnatan Ortiz
  • 1