Duplicate HTML5 backend error

[jandrew44]

trafficstars

Sometimes I am getting the following error when using react-arborist 3.4.0: "Cannot have two HTML5 backends at the same time". My project does not have direct dependencies "react-dnd", "dnd-core" and "react-dnd-html5-backend" and I don't have any other libraries depending on these packages(react-arborist is the only library requesting it). Also I don't use drag&drop functionality in my project at all, but I am using react-arborist trees inside of several react components. I tried to set disableDrag and disableDrop flags for all of my trees but it did not help. Is it possible to configure react-arborist to not initialize HTML5 backend when drag&drop functionality is not needed(or at least do not do it twice)?

[bijinfeng]

same problem

[jandrew44]

I have managed to solve it by the workaround mentioned here: https://github.com/react-dnd/react-dnd/issues/186?ysclid=luqqkj24pl935939248#issuecomment-978206387

Still I am not happy to have direct dependencies "react-dnd" and "react-dnd-html5-backend". Would prefer react-arborist to handle it by adding DndProvider wrappers internally.

[jameskerr]

Glad you have a workaround. The next version of react-arborist will depend on react-aria's use-drag/drop hooks rather than the aging react-dnd. These issues should not longer be a problem.

[JaafarF]

@jandrew44 would be great if you sahre your solution here , Thank you!

[jandrew44]

Here is my wrapper component. It requires container element id to be passed as contextId. passRef is used to pass ref parameter to the tree because it cannot be passed directly in this case. If you don't need to pass ref it can be removed.

[Cmen117696]

Here is my solution, maybe helps.

1. add DndProvider with HTML5Backend in root.
2. get dropManager with useDragDropManager hooks and add it on Tree.

main.tsx

<DndProvider backend={HTML5Backend}>
        <EditorShortcuts>
          {workbenchStore.isReady && <EditCanvas />}
          <Toolbar />
          <LeftPanel />
          <PropertiesPanel />
          <CommandMenu />
        </EditorShortcuts>
      </DndProvider>

tree.tsx

import { useDragDropManager } from 'react-dnd';

export const NodeTree = observer(() => {
   const dragDropManager = useDragDropManager();
   // ...some code
   return <Tree
        ref={treeRef}
        childrenAccessor={(node) => node.reversedChildren || null}
        data={treeData}
        width={width}
        height={height}
        onRename={onRename}
        onMove={onMove}
        onNodeClick={onNodeClick}
        dndManager={dragDropManager}
      />
})

[jameskerr]

Next version will not rely on react-dnd anymore (thank God)

[Artboomy]

Maybe I'm misunderstanding something, but react-dnd is still listed in the dependencies as of current 3.4.3 version. Nor this issue has any linked PR, closed or not, regarding removal of react-dnd. Why the issue is closed?

[goliney]

@Artboomy the lib is no longer maintained, so nobody will move from react-dnd to react-aria. See: https://github.com/brimdata/react-arborist/issues/310