DragSource attempting to setup HTML5Backend a second time in v9.4.0
See original GitHub issueDescribe the bug
After updating to v9.4.0 we found that when mounting components using the DragSource
decorator, it would sometimes attempt to setup the HTML5Backend
again, thus triggering the error Uncaught Error: Cannot have two HTML5 backends at the same time
(as this.window.__isReactDndBackendSetUp
was not false
).
The Dnd Context Provider is declared in the root of the page (and thus is above the components that are unmounted and mounted in the tree).
I suspect that either the teardown isn’t triggering when it should, or the setup is triggering when it shouldn’t, thus triggering this error.
Also, it should be noted that having multiple DragSources (such as items in a list), doesn’t trigger this when they’re rendered together. It’s only when the list is replaced with another list that this bug is triggered.
Expected behaviour
We expect that unmounting and mounting two components that use react-dnd
to correctly update the this.window.__isReactDndBackendSetUp
global variable without throwing an error.
Desktop (please complete the following information):
- OS: macOS (although this has been reported on other systems as well)
- Browser: Chrome
- Version: 77
Additional context The stack trace from console:
Uncaught Error: Cannot have two HTML5 backends at the same time.
at HTML5Backend.setup (HTML5Backend.js:388)
at DragDropManagerImpl.handleRefCountChange (DragDropManagerImpl.js:48)
at Object.dispatch (redux.js:227)
at HandlerRegistryImpl.addSource (HandlerRegistryImpl.js:100)
at registerSource (registration.js:13)
at DragDropContainer.receiveType (decorateHandler.js:154)
at DragDropContainer.receiveProps (decorateHandler.js:139)
at DragDropContainer.componentDidMount (decorateHandler.js:115)
at commitLifeCycles (react-dom.development.js:20049)
at commitLayoutEffects (react-dom.development.js:22813)
Issue Analytics
- State:
- Created 4 years ago
- Reactions:4
- Comments:9 (2 by maintainers)
Top GitHub Comments
@pjgates I don’t know how bad this idea is but you can make it work by setting yourself the property to false on mount.
I don’t have much knowledge about working of react dnd and I would like to get feedback on this approach wether this will break code or not.
[HTML5BackendImpl.ts#L108-L108](https://github.com/react-dnd/react-dnd/blob/8e6f62e612c0b0a376ac4a86cd371588dfcd2a70/packages/backend-html5/src/HTML5BackendImpl.ts#L101-L112)
maybe this rootElement can be replace by ReactRef? I cant use custom rootElement when my component is not mounted.
@darthtrevino