frontend-collective / frontend-collective/react-sortable-tree
Cannot have two HTML5 backends at the same time. Conflict with react-dnd
- 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