Troubleshooting

This page is dedicated to the problems you might bump into while using React DnD.

Could not find the drag and drop manager in the context

There are several ways this error might have happened:

1. You wrapped some component with a DragSource, DropTarget, or DragLayer, but forgot to wrap your top-level component with the DragDropContext.

2. You have wrapped the top-level component with the DragDropContext but exported an unwrapped version by mistake.

3. You are using a component in an isolated environment like a unit test. See the second point for instructions to stub it.

4. The context is lost for some other reason. Please file an issue if you can reproduce it on a small project.

Wrap top-level component with a DragDropContext

To fix this error, find the top-level component in your app. Usually, this is the root route handler. It doesn't have to be the topmost component, but it has to be higher in the hierarchy than any of your component using React DnD. Wrap this component with a DragDropContext call. It is important to specify a backend as the only argument in that call. Currently React DnD only provides an HTML5 backend, but touch backend support is coming in the future.

Stub the context inside the unit tests

If you have this error in a test, read the testing guide for instructions on stubbing the context.

Make sure you that don't have duplicate React

This problem may also appear if you have a duplicate React installation in your Browserify or Webpack build. This article explains both the problem and the solution to it.

You want to inspect what's happening internally with Redux.

You can enable Redux DevTools by adding a debugMode prop to your provider, with the value of true.

<DndProvider debugMode={true} backend={HTML5Backend}>