'react-dnd' does not contain an export named 'DragDropContext'

Question

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?

Answer 1

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!

Answer 2

Wrapping HTML5Backend with curly braces solved the problem for me.

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