Dnd with 2 tables, 2 routes, redux. "Cannot have two HTML5 backends at the same time"

[AkselAllas]

I have 2 routes: route1 and route2, which both render a MUI-datatable.
In 3.1.1, when I switch from route1 to route2, i get an error:

Cannot have two HTML5 backends at the same time

Stacktrace shows that this is a dnd error. As such, I downgraded to 3.0.1 and now the error doesn't happen.

I hope this is useful. I can provide more details if necessary on Thursday.

Full stack trace of error:

HTML5BackendImpl.setup
node_modules/react-dnd-html5-backend/dist/esm/HTML5BackendImpl.js:403
DragDropManagerImpl.handleRefCountChange
node_modules/dnd-core/dist/esm/DragDropManagerImpl.js:38
dispatch
node_modules/redux/es/redux.js:222
HandlerRegistryImpl.addTarget
node_modules/dnd-core/dist/esm/HandlerRegistryImpl.js:101
registerTarget
node_modules/react-dnd/dist/esm/common/registration.js:3
registerHandler
node_modules/react-dnd/dist/esm/hooks/internal/drop.js:54
commitHookEffectListMount
node_modules/react-dom/cjs/react-dom.development.js:19731
commitLifeCycles
node_modules/react-dom/cjs/react-dom.development.js:19787
commitLayoutEffects
node_modules/react-dom/cjs/react-dom.development.js:22803
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:188
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:237
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:292
commitRootImpl
node_modules/react-dom/cjs/react-dom.development.js:22541
unstable_runWithPriority
node_modules/scheduler/cjs/scheduler.development.js:653
runWithPriority$1
node_modules/react-dom/cjs/react-dom.development.js:11039
commitRoot
node_modules/react-dom/cjs/react-dom.development.js:22381
finishSyncRender
node_modules/react-dom/cjs/react-dom.development.js:21807
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:21793
(anonymous function)
node_modules/react-dom/cjs/react-dom.development.js:11089
unstable_runWithPriority
node_modules/scheduler/cjs/scheduler.development.js:653
runWithPriority$1
node_modules/react-dom/cjs/react-dom.development.js:11039
flushSyncCallbackQueueImpl
node_modules/react-dom/cjs/react-dom.development.js:11084
flushSyncCallbackQueue
node_modules/react-dom/cjs/react-dom.development.js:11072
batchedUpdates$1
node_modules/react-dom/cjs/react-dom.development.js:21862
notify
node_modules/react-redux/es/utils/Subscription.js:19
Subscription.notifyNestedSubs
node_modules/react-redux/es/utils/Subscription.js:92
Subscription.handleChangeWrapper
node_modules/react-redux/es/utils/Subscription.js:97
dispatch
node_modules/redux/es/redux.js:222
e
<anonymous>:1:40553
(anonymous function)
node_modules/@reduxjs/toolkit/node_modules/redux-thunk/es/index.js:11
▲ 30 stack frames were expanded.
(anonymous function)
src/immutableStateInvariantMiddleware.ts:249
  246 |        )
  247 |      })
  248 | 
> 249 |      const dispatchedAction = next(action)
      | ^  250 | 
  251 |      measureUtils.measureTime(() => {
  252 |        state = getState()
View compiled
dispatch
node_modules/redux/es/redux.js:638
_temp3
src/createAsyncThunk.ts:383
  380 |          finalAction.meta.condition
  381 | 
  382 |        if (!skipDispatch) {
> 383 |          dispatch(finalAction)
      | ^  384 |        }
  385 |        return finalAction
  386 |      })()
View compiled

Tech	Version
Material-UI	4.10.1
MUI-datatables	3.1.1
React	16.13.1
reduxjs/toolkit	1.3.5
redux	4.0.5
redux-thunk	2.3.0
react-redux	7.2.0
redux-thunk	2.3.0

[patorjk]

@AkselAllas thank you for the report! I'm looking into it now.

[patorjk]

I'm having trouble re-creating this. However, I found this:

react-dnd/react-dnd#186

It looks like this problem occurs when multiple react-dnd components are used in an application. Though it appears as if the latest versions of react-dnd have solved this issue. Are you using react-dnd in your app? If so, which version?

If not, if you grep through your node_modules, do you see any of your dependencies using react-dnd?

[AkselAllas]

Thank you! It now works :)

I tried my error case again. In 3.1.1 the error was always reproducible. Then with both 3.1.2 and 3.1.3 the reproducible case didn't give error anymore.

Something I failed to mention is that in route 1, I had 2 instances of mui-datatables rendered. Both with some different custom render functions and etc.

Also I grep'ed my node_modules. After removing mui-datatables from package.json, I didn't have any react-dnd files. (except babel-loader cache and material-ui changelog files.)

Thank you for maintaining this package.

[dyukovlad]

Also faced with the same problem. After updating the package, everything went smoothly. Thanks you

[patorjk]

Glad to hear, thank you all for the report!

[butchmarshall]

I'm getting this error on mui-datatables 3.4.1 after upgrading from v2 - another part of my application uses react-dnd with the react-dnd-mouse-backend.

When switching between the two screens I still get this crash.

Any solution?