Cannot have two HTML5 backends at the same time. Conflict with react-dnd

I use react-sortable-tree for my app which supports multiple color themes. I render each tree element with customized ‘generateNodeProps’.

When I change color theme it re-renders the tree.

And everything works perfect without react-dnd. But I have another component which uses react-dnd, so I have to wrap my app to DragDropContextProvider.

<DragDropContextProvider backend={HTML5Backend}>
 ...
</DragDropContextProvider>

and import tree without dnd context. import { SortableTreeWithoutDndContext as SortableTree } from 'react-sortable-tree'; But I still have an error:

HTML5Backend.js:398 Uncaught Error: Cannot have two HTML5 backends at the same time. at HTML5Backend.setup (HTML5Backend.js:398) at DragDropManagerImpl.handleRefCountChange

The above error occurred in the <DropTarget(TreeNode)> component: in DropTarget(TreeNode) (created by Grid) in div (created by Grid) in div (created by Grid) in Grid (created by List) in List in Scrolling(List) (created by AutoSizer) in div (created by AutoSizer) in AutoSizer (created by ReactSortableTree) in div (created by ReactSortableTree) in ReactSortableTree (created by Context.Consumer) in SortableTreeWithoutDndContext (at TreeWithFilters.tsx:618)

App throws error only when I try to expand a tree node (if tree has more than 1 level). For 1 level trees there is no expand buttons and also no errors.

If I disable DragDropContextProvider and import SortableTree with dnd context import SortableTree from 'react-sortable-tree'; i don’t have this error.

I tried to create a codesandbox, but couldn’t reproduce it online in simplified version. Sorry about it.

But maybe some of you had similar problem and you have any ideas, how to solve it.

“react-dnd”: “^7.6.0”, “react-dnd-html5-backend”: “^7.6.0”, “react-sortable-tree”: “^2.6.2”,

[gusano]

This is pretty annoying and happens with each hot reload

[dnizetic]

Any fix on this yet. Or a workaround ?

@HavermansStef

My workaround was - place the DnDContext outside of BrowserRouter.