react-sortable-tree icon indicating copy to clipboard operation
react-sortable-tree copied to clipboard

Cannot have two HTML5 backends at the same time.

Open gmarathi-nisum-com opened this issue 7 years ago • 10 comments

Hi,

We are using react-sortable tree component where i do not need drag/drop functionlity.At the same time, we are using react-trello component which is having kanban board with drag and drop functionlity. These two components are being used in same page. So, we are getting Cannot have two HTML5 backends at the same time. error.

We have made canDrag={false} canDrop={false}. But Still we are facing the same issue.

Can you Please help me to remove draggablecontext from sortable tree.

gmarathi-nisum-com avatar Oct 10 '17 13:10 gmarathi-nisum-com

From the Troubleshooting section of the readme:

react-dnd only allows for one DragDropContext at a time (see: https://github.com/gaearon/react-dnd/issues/186). To get around this, you can import the context-less tree component via SortableTreeWithoutDndContext.

// before
import SortableTree from 'react-sortable-tree';

// after
import { SortableTreeWithoutDndContext as SortableTree } from 'react-sortable-tree';

fritz-c avatar Oct 10 '17 15:10 fritz-c

I am also having same above issue.I used the above approach u mentioned but the same issue i am facing is there way to remove that dragging functionality from that tree.

import { SortableTreeWithoutDndContext as SortableTree } from 'react-sortable-tree';

sakhamuri92 avatar Oct 10 '17 18:10 sakhamuri92

// before import SortableTree from 'react-sortable-tree';

// after import { SortableTreeWithoutDndContext as SortableTree } from 'react-sortable-tree';

among these two i am using the second statement only for tree and if iam providing Sortable tree like below i am getting other issues also

Eg:<SortableTree />

Or we need to use like this.

sakhamuri92 avatar Oct 10 '17 18:10 sakhamuri92

image

import { SortableTreeWithoutDndContext as SortableTree, changeNodeAtPath } from 'react-sortable-tree';

top1st avatar Dec 19 '17 15:12 top1st

find a solution, just put DragDropContext at the top level, like wrap the parent component see discussion here

uptonking avatar Dec 29 '17 03:12 uptonking

its not working at all @uptonking @sakhamuri92 @fritz-c . Tried different combinations and solutions still I am receiving same error. Really getting pissed off with this component. Thanks for making our lives hell

tejaswaroop51 avatar Mar 19 '18 18:03 tejaswaroop51

@top1st Were you able to resolve this issue? I'm getting the same error when I use the SortableTreeWithoutDndContext.

shalinigr avatar Mar 19 '18 18:03 shalinigr

@tejaswaroop51 Getting mad at the component and/or maintainers won't help. You have to realize that @fritz-c and I maintain this component in our free time. If you have an urgent issue, we try our best. If you are unhappy feel free to contribute/investigate/open a PR.

@shalinigr @top1st @uptonking @sakhamuri92 If you guys can post a minimal reproduction that would be most helpful. Otherwise, I will investigate when I next have time.

Also just for reference. the basic example provided on the demo site uses the tree without dnd context

wuweiweiwu avatar Mar 28 '18 01:03 wuweiweiwu

It happens after a hot reload. I.e. change code, page hot reloads, then try dragging a node.

dnizetic avatar Jun 10 '20 20:06 dnizetic

react-create-app [4.0.3] hot reloading seems to be causing the issue for me. For anyone else with the same issue, adding the FAST_REFRESH=false env variable seems to have solved it. https://create-react-app.dev/docs/advanced-configuration/

csenn avatar Apr 04 '21 16:04 csenn