React-dnd: no se puede configurar html5backend dos veces

Creo que me encuentro con el mismo problema. A continuación se muestra el seguimiento de la pila de errores. El problema se reproduce en React 16, pero no en React 15. Parece estar relacionado con la recarga en caliente de 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)

El mismo problema que @sangmokh desde que actualicé a

Lo mismo aquí cuando se actualiza a React 16, usando la aplicación Create React.

actualización: ya estaba conectando HTML5Backend y DragDropContext en un componente principal, asegurándome de que el componente de nivel más alto estuviera donde se configuró, y luego actualicé a la última versión de backend de react dnd y html5 , y este problema desapareció mágicamente.

¿Existe alguna solución / explicación para este problema?

Estoy usando react-hot-loader , react-dnd y react-dnd-html5-backend . Para evitar que HTML5Backend se cree más de una vez, moví DragDropContext hasta el contenedor superior:

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

const AppContainerDnD = DragDropContext(HTML5Backend)(AppContainer);

Luego usé esta versión decorada del AppContainer de la manera habitual:

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')
    );
  });
}

Intentaré recordar informarle si surge algún problema.

@havardge gracias, lo intentaré!
Mi solución actual es un poco sucia pero funciona muy bien.
window.__isReactDndBackendSetUp = false;

@davidspiess Dime por favor, ¿cómo lo

@IvanGrodno ¡ aquí tienes!

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 gracias por la respuesta.
El uso de esta solución fue la causa de otro error cuando la funcionalidad de arrastrar y soltar no funcionó en absoluto. El uso de este 'react-dnd-mouse-backend' en lugar de 'react-dnd-html5-backend' resolvió el problema.

Mi solución es almacenar en caché su DragDropContext, tal vez esto ayude:

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);

Este error ocurre (para mí) solo con DragDropContextProvider. El uso de DragDropContext resuelve el problema.

Tengo el mismo problema cuando uso la recarga en caliente / HMR
Para mi caso, actualizar react-dnd a v8.0.3 y usar DndProvider lugar de DragDropContext resolvió mi problema.