React beautiful DND - "Unable to find draggable with id: X"

Question

I am trying to use react-beautiful-dnd for drag n drop sorting of a list but my elements are not draggable and I get Unable to find draggable with id: X. I have cross-check my code with examples in docs but unable to find what I need to fix. I am using constant id for key and draggableId prop.

Code:CodeSandBox

Edit 1: I expected the code to be able to drag and rearrange items but will return to their initial position as state update is not implemented

Tamanaha

same thing here ? codesandbox.io/s/k260nyxq9v – Sismondi

Yup , actually just converted it to functional component and removed onDraghandler with styles, none of which should affect the drag functionality I assume – Tamanaha

Answer 1

Just ran into the same problem. Try disabling React's Strict Mode. That fixed it for me. https://reactjs.org/docs/strict-mode.html

There's an open issue for this with react-beautiful-dnd here https://github.com/atlassian/react-beautiful-dnd/issues/2350. Hopefully compatibility with strict mode will be fixed soon. Until then removing strict mode works around the issue.

Greenling

Thank you , I switched to dnd-kit but hope this answer helps someone – Tamanaha

Having to disable strict mode is bad practise. There is a workaround but Atlassian's claim to update the module with critical fixes does not ring true in my ears. Strict mode seems pretty critical to me. That is why I would opt for the fork that does get updated like @dybzon mentioned in another answer. – Kenzie

Answer 2

Late to the party here, but I was facing the same issue. It turns out that there's a fork of react-beautiful-dnd called @hello-pangea/dnd. You can find it here.

This fork has the same API, but unlike react-beautiful-dnd it works in strict mode and seems to be actively maintained.

It's easy to switch over because they use the same API. Simply add the package

npm i @hello-pangea/dnd or yarn add @hello-pangea/dnd

and then change your imports from

import {
  Droppable,
  Draggable
} from "react-beautiful-dnd";

to

import {
  Droppable,
  Draggable
} from "@hello-pangea/dnd";

Note that @hello-pangea/dnd is typescript based, which means the types are included directly in this package too.

Zared

This was a huge lifesaver... Thank you!!! – Wingspan

I am using this package @hello-pangea/dnd but I still got the issue. This is what I got. @hello-pangea/dndUnable to find draggable with id: 8 – Hightest

Answer 3

The trick is to use the string id instead of number

 <Draggable
    key={section.id}
    draggableId={section.id.toString()}
    index={index}
 >

Unmerciful

Answer 4

I run into the same problem with nextjs

I went into next.config.js file and just set reactStrictMode to false

Ninety