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

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]

Glad to hear, thank you all for the report!

[dyukovlad]

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