CODEWITHSUNDEEP
reactjslistdrag-and-dropmultiple-columnsreact-beautiful-dnd
Matthew Roloff
Matthew Roloff

Reputation: 151

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

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.

Upvotes: 15

Views: 16487

Answers (8)

IlyaP
IlyaP

Reputation: 11

I fixed it by removing React.StrictMode in main.js (usually index.js).

Aka change this:

ReactDOM.createRoot(document.getElementById('root')).render(

  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

To this:

ReactDOM.createRoot(document.getElementById('root')).render(
    <App />

)

Upvotes: 1

JTtime
JTtime

Reputation: 81

with Droppable, mention type='group' to solve this problem

    <Droppable
        droppableId={"droppable"}
        type="group">
       {provided=>(
           )}
    </Droppable>

Upvotes: 4

Tim Nikischin
Tim Nikischin

Reputation: 837

Just replace react-beautiful-dnd with @hello-pangea/dnd. It is a 1:1 replacement (as it is a fork of react-beautiful-dnd) and maintenance seems to bee quite a bit better than the one provided by Atlassian. Also with more than 1K stars it's quite popular already and easy to replace.

Just replace all imports from react-beautiful-dnd with @hello-pangea/dnd and run any of those commands:

# npm
npm install @hello-pangea/dnd --save

# pnpm
pnpm add @hello-pangea/dnd

# yarn
yarn add @hello-pangea/dnd

Upvotes: 11

Jonnatan Ortiz
Jonnatan Ortiz

Reputation: 1

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.

Upvotes: 0

sar lavi
sar lavi

Reputation: 91

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

Upvotes: 1

Aurimas Gaidys
Aurimas Gaidys

Reputation: 341

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.

Upvotes: 27

Jonathan Mwaniki
Jonathan Mwaniki

Reputation: 340

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

Upvotes: 26

Rizwan Liaqat
Rizwan Liaqat

Reputation: 85

Try removing React's strict mode.

Upvotes: 5

Related Questions