React-dnd: can not setup html5backend two times

I believe I am running into the same issue. Below is the error stack trace. The issue reproduces in React 16, but not in React 15. It appears to related to hot reloading of react-dnd.

Uncaught Error: Cannot have two HTML5 backends at the same time. at HTML5Backend.setup (HTML5Backend.js:89) at DragDropManager.handleRefCountChange (DragDropManager.js:52) at Object.dispatch (createStore.js:186) at HandlerRegistry.addTarget (HandlerRegistry.js:114) at registerTarget (registerTarget.js:9) at DragDropContainer.receiveType (decorateHandler.js:150) at DragDropContainer.receiveProps (decorateHandler.js:139) at new DragDropContainer (decorateHandler.js:106) at constructClassInstance (react-dom.development.js:9760) at updateClassComponent (react-dom.development.js:10215)

Same problem as @sangmokh since upgrading to react 16 with hot reloading.

same here when upgrading to react 16, using create react app.

update: i was already connecting the HTML5Backend and the DragDropContext in a parent component, making sure the highest level component was where it was set up, and then upgraded to latest of react dnd and html5 backend, and this issue magically disappeared.

is there any solution/explanation for this problem?

I'm using react-hot-loader, react-dnd and react-dnd-html5-backend. To prevent the HTML5Backend from being created more than once, I moved the DragDropContext all the way to the topmost container:

import { AppContainer } from 'react-hot-loader';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

const AppContainerDnD = DragDropContext(HTML5Backend)(AppContainer);

Then used this decorated version of the AppContainer in the usual way:

render(
  <AppContainerDnD>
    <Root store={store} history={history}/>
  </AppContainerDnD>,
  document.getElementById('app')
);

if (module.hot) {
  module.hot.accept('./components/Root', () => {
    const NewRoot = require('./components/Root').default;
    render(
      <AppContainerDnD>
        <NewRoot store={store} history={history}/>
      </AppContainerDnD>,
      document.getElementById('app')
    );
  });
}

Will try to remember reporting back if any issue arises.

@havardge thanks, will try that!
My current workaround is a bit dirty but works great.
window.__isReactDndBackendSetUp = false;

@davidspiess Tell me please, how you applied it?

@IvanGrodno here you go!

import * as React from "react";
import { DragDropContext } from "react-dnd";
import HTML5Backend from "react-dnd-html5-backend";

const App = () => <div>Your App</div>;

// Hack until this ticket is fixed https://github.com/react-dnd/react-dnd/issues/894
window.__isReactDndBackendSetUp = false;

export default DragDropContext(HTML5Backend)(App);

@davidspiess thanks for the answer.
Using this solution was a cause of another bug when drag & drop functionality didn't work at all. Using this 'react-dnd-mouse-backend' instead 'react-dnd-html5-backend' resolved the issue.

My solution is to cache your DragDropContext, maybe this helps:

import * as React from "react";
import { DragDropContext } from "react-dnd";
import HTML5Backend from "react-dnd-html5-backend";

const App = () => <div>Your App</div>;

window.__DragDropContext = window.__DragDropContext || DragDropContext(HTML5Backend);

export default window.__DragDropContext(HTML5Backend)(App);

This bug occurs (for me) only with DragDropContextProvider. Using DragDropContext resolves the problem.

I have the same issue when using hot reloading / HMR
For my case, upgrading react-dnd to v8.0.3 and using DndProvider instead of DragDropContext solved my problem.