Problems with HTML5 Backend

[romanmuska]

Hi everyone,

i start using React Sortable Tree and i get error "Cannot have two HTML5 backends at the same time.".. I am using it with React DnD so i think that both components use react-dnd-html5-backend so there is a problem. Does someone know how to solve it? Thanks.

[fritz-c]

Hi, thanks for trying out the component. Try using the react-dnd context you're already using along with the context-less exported component SortableTreeWithoutDndContext

Something like:

import { SortableTreeWithoutDndContext } from 'react-sortable-tree';
import { dragDropContext } from 'react-dnd';

// ...

const myReactDndContext   = dragDropContext(HTML5Backend);
const SortableTree        = myReactDndContext(SortableTreeWithoutDndContext);
const MyOtherDndComponent = myReactDndContext(OtherComponent);

// ... use them in render()

[fritz-c]

Going to treat this as closed due to inactivity.

[tsuz]

Thanks @fritz-c ! It worked for me using import { DragDropContext } from 'react-dnd';

[aterentev]

Hello!

I have the same problem.
I use your tree in one column and I have to use React DnD in other column.

App.js

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

import ShowDirectoriesList from '../../containers/ShowDirectoriesList';

class App extends React.Component {
   render() {
       return (
           <DragDropContextProvider backend={HTML5Backend}>
               <Grid>
                   <Row className="show-grid">
                       <Col md={1} />
                       <Col md={5}>
                           <Panel className="explorer">
                               <ShowDirectoriesList />
                           </Panel>
                       </Col>
                       <Col md={6} />
                   </Row>
               </Grid>
           </DragDropContextProvider>
       );
   }
}

DirectoriesList.js

import SortableTreeWithoutDndContext from 'react-sortable-tree';

class DirectoriesList extends React.Component {
    render() {
        return (
            <SortableTreeWithoutDndContext
            // ...    
             />
        );
    }
}

With this code, when I tried to drag any element in the tree I got "Cannot have two HTML5 backends at the same time."

[fritz-c]

@aterentev Need to put brackets around the name in the import as follows:

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

[aterentev]

Thanks @fritz-c ! It helps.

[IvanGrodno]

My component that uses the tree is loaded into another project by clicking on one of the tabs. The first time you load a tree, an error occurs - "Cannot have two HTML5 backends at the same time".
The decisions above did not help.

Only the change in value helps window.__isReactDndBackendSetUp = undefined or window.__isReactDndBackendSetUp = false.

The tree is loaded but the tree does not work at all drag and drop. Image
Can anyone know which fields of the 'window' object changes when working with a tree?

[wuweiweiwu]

@IvanGrodno this issue is already documented as a bug / more investigation. For future reference, its probably best to open a new issue or look if this issue already exists.

Maintainers rarely check closed issues.