frontend-collective / frontend-collective/react-sortable-tree

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

Open
#510 25 comments 10 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
5k
Forks
914
PR merge metrics
No merged PRs in 30d

Description

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.

```

...

```

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 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",

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the SortableTreeWithoutDndContext usage shown at TreeWithFilters.tsx:618 and the nested-node expansion path that produces the HTML5Backend error. Compare that setup with the working SortableTree import and the react-dnd 7.6.0/react-sortable-tree 2.6.2 versions; done means expanding a multi-level tree works alongside the external DragDropContextProvider without the duplicate-backend error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.