react-sortable-tree: 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”,

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 10
Comments: 25

Most upvoted comments

The same thing has happened to me, I have tried everything that has been said on this channel, but I have not been able to obtain good results, I have chosen to clone the repository https://github.com/frontend-collective/react-sortable-tree to analyze its source code, and I have reached a perfect solution, which does not give any kind of problem

Step to perform the integration well

Place the DndProvider in the top Tree of the app, as shown in the configuration of the doc
When you want to call the SortableTree component you must wrap it with the Consumer property of the DndCotext
Pass as dragDropManager property of the SortableTree component the value of dragDropManager of the DndContext
Done, you can use this code in any part of your application without having the annoying problem Cannot have two HTML5 backends at the same time

<DndContext.Consumer>
        {({ dragDropManager }) =>
          <SortableTree
              dragDropManager={dragDropManager}
              ...
            />
        }
</DndContext.Consumer>

The versions I’m using:

react-dnd: “^11.1.3”
react-dnd-html5-backend: “^11.1.3”
react-sortable-tree: “^2.8.0”

DmaKill on Jul 25, 2022

This is pretty annoying and happens with each hot reload

gusano on Jun 4, 2020

Any fix on this yet. Or a workaround ?

@HavermansStef

My workaround was - place the DnDContext outside of BrowserRouter.

dnizetic on Nov 20, 2020

@PCPbiscuit Glad to know that you nailed it. Let me know if you need to see my fix.

afernandezminutentag on Jun 10, 2021

Wow. Actually managed to fix this myself. Wrapping my layout with dndprovider and importing SortableTreeWithoutDndContext instead of standard SortableTree seemed to work, even tho it was my initial fix attempt

PCPbiscuit on Jun 10, 2021

I was seeing the same thing in our application – had wrapped the whole app in a DragDropContextProvider at the top-level and was using SortableTreeWithoutDndContext, but got the dreaded “Cannot have two HTML5 backends at the same time” error whenever I expanded a folder node or dragged a node around.

What seemed to fix this, for me, was modifying my context wrapper to look more like what I saw in react-sortable-tree’s source code.

Before, I had something like this:

import { DragDropContextProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

const WrappedMyApp = () => {
  return (
    <DragDropContextProvider backend={HTML5Backend}>
      <MyApp />
    </DragDropContextProvider>
  );
};

But I changed it to look more like this…

import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

const WrappedMyApp = DragDropContext(HTML5Backend)(MyApp);

…and as far as I can tell, that seemed to work okay. Couldn’t really explain why, though.

menewman on Nov 1, 2019