question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DragSource attempting to setup HTML5Backend a second time in v9.4.0

See original GitHub issue

Describe 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:open
  • Created 4 years ago
  • Reactions:4
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
RavenColEvolcommented, Aug 9, 2021

@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.

useLayoutEffect(() => {
   window.__isReactDndBackendSetUp = false;
}, [])

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.

0reactions
MeetzhDingcommented, Oct 9, 2022
Read more comments on GitHub >

github_iconTop Results From Across the Web

React DnD - "Cannot have two HTML5 backends at the same ...
Just try to make the context of HTML5Backend a singleton. ... You can either create a new file and import DragDropContext where you...
Read more >
HTML5Backend.js - searchcode
/react-dnd/dragSource/node_modules/react-dnd-html5-backend/lib/HTML5Backend.js ... 88 throw new Error('Cannot have two HTML5 backends at the same time.
Read more >
How to get setup with React DnD - codeburst
First in order to install React DnD you actually have to install two packages, the first one installs React DnD while the second...
Read more >
react-dnd-html5-backend: Versions - Openbase
This means that to create a second backend for an iframe, one needs to use: <DndProvider backend={HTML5Backend} context={iframeWindow} /> .
Read more >
react-mtg-playtester - UNPKG
node_modules/react-dnd-html5-backend/lib/EnterLeaveCounter.js",". ... didDrop(), 'Cannot call drop twice during one drag operation.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found