Using SortableTreeWithoutDndContext does not work

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. https://github.com/frontend-collective/react-sortable-tree/blob/2a5f741d0bc965b47a8ea6764e98a13aa3e51544/src/react-sortable-tree.js#L941-L949

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

[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 https://github.com/frontend-collective/react-sortable-tree/issues/788#issuecomment-710661403 ! Thanks 😃

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

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