Multiple DndProviders inside a pure component can lead to `Cannot have two HTML5 backends at the same time`

[dcsaszar]

Describe the bug

Using two <DndProvider backend={HTML5Backend}> inside a React.PureComponent (which updates only if props change), can under certain conditions lead to an error like:

Error: Cannot have two HTML5 backends at the same time.
	    at HTML5BackendImpl.setup node_modules/react-dnd-html5-backend/dist/esm/HTML5BackendImpl.js:423
	    at DragDropManagerImpl.handleRefCountChange node_modules/dnd-core/dist/esm/classes/DragDropManagerImpl.js:21
	    at Object.dispatch node_modules/redux/es/redux.js:297
	    at HandlerRegistryImpl.addSource node_modules/dnd-core/dist/esm/classes/HandlerRegistryImpl.js:92
	    at registerSource node_modules/react-dnd/dist/esm/internals/registration.js:10
	    at registerDragSource node_modules/react-dnd/dist/esm/hooks/useDrag/useRegisteredDragSource.js:24
	    at commitHookEffectListMount node_modules/react-dom/cjs/react-dom.development.js:20573
	    at commitLifeCycles node_modules/react-dom/cjs/react-dom.development.js:20634
	    at commitLayoutEffects node_modules/react-dom/cjs/react-dom.development.js:23426
	    at HTMLUnknownElement.callCallback node_modules/react-dom/cjs/react-dom.development.js:3945
	    at Object.invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:3994
	    at invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:4056
	    at commitRootImpl node_modules/react-dom/cjs/react-dom.development.js:23151
	    at unstable_runWithPriority node_modules/scheduler/cjs/scheduler.development.js:468
	    at runWithPriority$1 node_modules/react-dom/cjs/react-dom.development.js:11276
	    at commitRoot node_modules/react-dom/cjs/react-dom.development.js:22990

Reproduction

This is the smallest reproducing example I was able to come up with:
https://codepen.io/dcsaszar/pen/ZEKLVVJ

It describes basically what happens in one of our apps: Inside a PureComponent-like component (we have our own abstraction, but with a similar implementation of shouldComponentUpdate), we have a single read-only (this is a prop, in the example: foo) DnD component, which later is dynamically replaced by a single read-write DnD component, and then joined by a 2nd DnD component.

Steps to reproduce the behavior:

1. Go to https://codepen.io/dcsaszar/pen/ZEKLVVJ
2. See the error in the browser console

Expected behavior

• No error.
• The components should render successfully.

Desktop

• Browser: Chrome
• Version:
  • react 17.0.2
  • react-dnd: 14.0.2
  • react-dnd-html5-backend: 14.0.0

Related
#1558
#3119
#3178

Since I wasn't sure which/if any of the above qualifies for duplicate, I created a fresh issue.

[ismailmmd]

+1 Getting the same error

I am using version 7.7.0 for both react-dnd and react-dnd-html5-backend

Cannot have two HTML5 backends at the same time.

      206 |
    > 207 |             const wrapper = mount(
          |                             ^
      208 |                     <Provider store={store}>
      209 |                             <DragDropContextProvider backend={HTML5Backend}>
      210 |                                     <MyComponent />

      at HTML5Backend.Object.<anonymous>.HTML5Backend.setup (node_modules/react-dnd-html5-backend/lib/cjs/HTML5Backend.js:318:19)
      at DragDropManagerImpl.handleRefCountChange (node_modules/dnd-core/lib/cjs/DragDropManagerImpl.js:30:31)

[piechoo]

Got the same issue with
"react-dnd": "16.0.0", "react-dnd-html5-backend": "16.0.0",

[ymh1028]

add props context={window}, it's solved my problem.

[emileWhispa]

add props context={window}, it's solved my problem.

Thanks you saved my ass

[ZijieZh]

thx

add props context={window}, it's solved my problem too.
with version:
"react-dnd": "^9.4.0",
"react-dnd-html5-backend": "^9.4.1",

[aovchinn]

should this context prop be documented somehow ?

[aovchinn]

should this be true by default ?
const isGlobalInstance = !props.context

react-dnd/packages/react-dnd/src/core/DndProvider.tsx

Line 65 in 7c88c37

const isGlobalInstance = !props.context

[echoyl]

add props context={window}, it's solved my problem.

thx,it works

[clfuture]

Got the same issue with "react-dnd": "16.0.0", "react-dnd-html5-backend": "16.0.0",

Have you solved this problem yet? My version is "react-dnd": "^14.0.4", "react-dnd-html5-backend": "^14.0.2",

[coder-zhuzm]

add props context={window}, it's solved my problem.

有用的！！！

[ekeijl]

For people still struggling with this: the issue mostly seems to occur when you wrap your DnD enabled component directly with a DnDProvider (instead of using the Provider at the top level of your app) and then navigating between routes/pages in your app.

I see two workarounds:

• Wrap your top level <App> component with the <DnDProvider> and remove any other DnDProvider components. This ensures there can only ever be a single instance of the HTML5 backend.
• Add the context={window} prop on the provider <DndProvider backend={HTML5Backend} context={window}>.

[pvrameshkf]

Thanks a lot @ekeijl . Below solution worked for me.

Add the context={window} prop on the provider <DndProvider backend={HTML5Backend} context={window}>