9

I tried to use react dnd in my react web application. I create a js file call withDnDContext.js. When I compile it, I received an error 'react-dnd' does not contain an export named 'DragDropContext'. My react-dnd version is latest one 9.3.2

This is my withDnDContext.js

import { DragDropContext } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'

export default DragDropContext(HTML5Backend);

Anyone know how to solve this?

phoon
  • 369
  • 1
  • 6
  • 21

2 Answers2

11

If you use the latest version of react dnd, DragDropContext has been replaced with DndContext. Please see React-DnD V8

My top component looks like this;

import { React } from 'react';
import { DndProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

export default class MyApp {
    render() {
        return (
            <DndProvider backend={HTML5Backend}>
                <MyComp />
            </DndProvider>
        );
    }
}

The documentation or overview could be really helpful!

0stone0
  • 34,288
  • 4
  • 39
  • 64
5

Wrapping HTML5Backend with curly braces solved the problem for me.

import { HTML5Backend } from 'react-dnd-html5-backend'
Ruth Mbugua
  • 63
  • 1
  • 4