DocsExamplesGitHub

Quick Start

OverviewTutorialTestingFAQTroubleshooting

Top-Level API

DragSourceDropTargetDragLayerDragDropContext

Connecting to DOM

DragSourceConnectorDropTargetConnector

Monitoring State

DragSourceMonitorDropTargetMonitorDragLayerMonitor

Backends

HTML5Test

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.

React DnD does not provide a default export 

React DnD does not provide a default export.
Mind the difference:

// Wrong: var DragSource = require('react-dnd'); // Correct: var DragSource = require('react-dnd').DragSource;

You seem to be applying the arguments in the wrong order 

For the DragSource, DropTarget, DragLayer, and the DragDropContext, it is important that you first pass them the configuration arguments, and then inject your React component in a second call.

// Wrong: module.exports = DragSource(YourComponent)(/* ... */); module.exports = DragSource(YourComponent, /* ... */); // Correct: module.exports = DragSource(/* ... */)(YourComponent);

Remember, the component comes last!

You may ask why I chose such a weird API. In fact it's not too weird, but the neat part about it is that, if you enable the ES7 decorators in Babel by putting { "stage": 1 } in your .babelrc file, you can write them naturally:

@DragSource(/* ... */) export default class YourComponent { }

You may not use ES7 decorators today (linters don't understand them), but this API lets you switch to the decorators when they are more mature, and also has nicer composition semantics in ES5 or ES6.