Can not import DragDropContext in v9.3.2

[shenghou]

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:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. 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.

[adiosneo]

Hi, DragDropContext was removed since version 9 #1439

[shenghou]

Hi, DragDropContext was removed since version 9 #1439

oh thx

[hisuwh]

Whats the migration path now that this has been removed?

[alencarlucas]

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

[shenghou]

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.

[hisuwh]

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>
+     );
+ };

[ldd]

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

[Liruimin2]

how to solve

[1Jesper1]

As decorator component:

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

const DragDropContext = (WrappedComponent) => (props) => {
	return  (<DndProvider backend={HTML5Backend}>
		<WrappedComponent {...props} />
	</DndProvider>);
};

export default DragDropContext;