Using SortableTreeWithoutDndContext does not work

[zourbuth]

There are two DnDs in a page.
One for the RST with external nodes, and the other for the tab swapping.
We place <DndProvider /> in top level component and
use SortableTreeWithoutDndContext in child component
to avoid two HTML backends issue.

It seems the RST renders nothing or returns null as the dragDropManager is undefined.

react-sortable-tree/src/react-sortable-tree.js

Lines 941 to 949 in 2a5f741

	const SortableTreeWithoutDndContext = props => (
	<DndContext.Consumer>
	{({ dragDropManager }) =>
	dragDropManager === undefined ? null : (
	<ReactSortableTree {...props} dragDropManager={dragDropManager} />
	)
	}
	</DndContext.Consumer>
	);

Is there a workaround to deal with this issue?
Thank You.

[zourbuth]

Any update?
It seems there is no activity for this repository for weeks.
Is this still maintained?

[zli-aa]

@zourbuth You need to wrap your component with the DndProvider.

<DndProvider backend={HTML5Backend}>
    <SortableTreeWithoutDndContext />
</DndProvider>

ref: https://github.com/frontend-collective/react-sortable-tree/blob/master/stories/touch-support.js

[zourbuth]

@zli-aa, we did. We wrap it in top level component.
But dragDropManager always undefined and it makes RST renders null.

react-sortable-tree/src/react-sortable-tree.js

Line 944 in 2a5f741

dragDropManager === undefined ? null : (

[aliakakis]

@zli-aa it worked for us but I really do believe as @zourbuth mentioned that this repo seems to be unmaintained...

[drewpc]

@zourbuth I had the same problem and it was because I ended up with two copies of react-dnd in my final Webpack bundle, one that I was importing and the other that react-sortable-tree imported. Because DndContext is a singleton, having two copies means there are two singletons! I resolved the issue for myself by ensuring Webpack resolved the react-dnd package to a single, top-level installation of react-dnd.

https://webpack.js.org/configuration/resolve/#resolvealias

[Nauss]

I was having the same problem for months now and none of the solutions worked except for @drewpc 's one #788 (comment) ! Thanks :)

If anyone is interested, my webpack modification looks like this:

  resolve: {
    ...
    alias: {
      'react-dnd': path.resolve(__dirname, '../node_modules/react-dnd'),
    },
  },

[malestroms]

I just install and configure webpack just for try @drewpc solution but it didn't work for me, I've tried @Nauss just like that :( didn't work either, anyone have suggestions please?

btw: In my case I have a component that use react-sortable-tree and other that I'm trying to use basic HTML Drag and drop using draggable="true", but it doesn't work due the this lib, If I stop loading everything works :/ so I assume the issue is related

[PCPbiscuit]

None of the suggestions above seem to have helped. Tried resolving and also whenever I use SortableTreeWithoutDndContext it just doesn't render anything.

[minhdtb]

I faced the same issue with React 18 and typescript

[GabrielMil]

@minhdtb Were you able to fix the problem? Using React 18 and typescript