React-dnd: Can not import DragDropContext in v9.3.2

Created on 24 Jul 2019 · 8Comments · Source: react-dnd/react-dnd

Describe the bug
I upgraded dnd from 7.4.5 to 9.3.2, but the browser throw an error:

Attempted import error: 'DragDropContext' is not exported from 'react-dnd'. in 9.3.2

Reproduction

DEMON

Steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: [e.g. iOS]
Browser [ chrome last version]
Version [e.g. 22]

Additional context
Add any other context about the problem here.

Source

shenghou

👍5

Most helpful comment

This is what I ended up doing

- import { DragDropContext } from "react-dnd";  
- import HTML5Backend from "react-dnd-html5-backend";   
-
- export const withDragDropContext = DragDropContext(HTML5Backend);
+ import * as React from "react";
+ import HTML5Backend from "react-dnd-html5-backend";
+ import { DndProvider } from "react-dnd";
+ 
+ export const withDragDropContext = <TProps extends {}>(Component:  React.ComponentClass<TProps> | React.StatelessComponent<TProps>) =>
+ {
+     return (props: TProps) => (
+         <DndProvider backend={HTML5Backend}>
+             <Component {...props} />
+         </DndProvider>
+     );
+ };

hisuwh on 12 Aug 2019

👍18 👎5

All 8 comments

Hi, DragDropContext was removed since version 9 https://github.com/react-dnd/react-dnd/pull/1439

adiosneo on 25 Jul 2019

👍3

Hi, DragDropContext was removed since version 9 #1439

oh thx

shenghou on 26 Jul 2019

Whats the migration path now that this has been removed?

hisuwh on 5 Aug 2019

👍7

Guys, is there any migration guide for the breaking changes in the 9.x version?

alencarlucas on 9 Aug 2019

👍4

Guys, is there any migration guide for the breaking changes in the 9.x version?

No, You can remind the author to update the document.

shenghou on 12 Aug 2019

This is what I ended up doing

- import { DragDropContext } from "react-dnd";  
- import HTML5Backend from "react-dnd-html5-backend";   
-
- export const withDragDropContext = DragDropContext(HTML5Backend);
+ import * as React from "react";
+ import HTML5Backend from "react-dnd-html5-backend";
+ import { DndProvider } from "react-dnd";
+ 
+ export const withDragDropContext = <TProps extends {}>(Component:  React.ComponentClass<TProps> | React.StatelessComponent<TProps>) =>
+ {
+     return (props: TProps) => (
+         <DndProvider backend={HTML5Backend}>
+             <Component {...props} />
+         </DndProvider>
+     );
+ };

hisuwh on 12 Aug 2019

👍18 👎5

For those out there googling, this might help:

THIS DOES NOT WORK

import { createDndContext, DndProvider } from "react-dnd";
import Backend from "react-dnd-html5-backend";
// ...

const DndContext = createDndContext(Backend);

// ...
 const MyComponent = () => (
  <DndProvider backend={Backend} context={DndContext}>
    /* ... */
  </DndProvider>
);

I repeat, THAT DOES NOT WORK

Instead do this:

import { createDndContext, DndProvider } from "react-dnd";
import Backend from "react-dnd-html5-backend";
// ...

const DndContext = createDndContext(Backend);

  // ...
 const myComponent = () => (
  const managerRef = useRef(DndContext);
  <DndProvider backend={Backend} manager={managerRef.current.dragDropManager}>
  /* ... */
  </DndProvider>
)

sources: Dnd code