10

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

Solaris
  • 674
  • 7
  • 22
  • same thing here ? https://codesandbox.io/s/k260nyxq9v – cmgchess Apr 10 '22 at 17:51
  • Yup , actually just converted it to functional component and removed onDraghandler with styles, none of which should affect the drag functionality I assume – Solaris Apr 10 '22 at 18:01

3 Answers3

31

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.

jpolete
  • 808
  • 1
  • 7
  • 12
  • 3
    Thank you , I switched to [dnd-kit](https://www.npmjs.com/package/@dnd-kit/core) but hope this answer helps someone – Solaris Apr 19 '22 at 16:53
  • 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. – ThaJay Feb 27 '23 at 14:53
8

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.

dybzon
  • 1,236
  • 2
  • 15
  • 21
0

I run into the same problem with nextjs

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

Dálcio Macuete Garcia
  • 793
  • 7
  • 10