Uncaught Error: Cannot have two MultiBackends at the same time.

[EnkeyMC]

trafficstars

Hello, my application which uses this library randomly crashes with error: Uncaught Error: Cannot have two MultiBackends at the same time.

Full stack trace:

    at _default.setup (MultiBackend.js:68)
    at DragDropManagerImpl.handleRefCountChange (DragDropManagerImpl.js:40)
    at Object.dispatch (redux.js:222)
    at HandlerRegistryImpl.addTarget (HandlerRegistryImpl.js:99)
    at registerTarget (registration.js:3)
    at DragDropContainer.receiveType (decorateHandler.js:140)
    at DragDropContainer.receiveProps (decorateHandler.js:125)
    at DragDropContainer.componentDidMount (decorateHandler.js:101)
    at commitLifeCycles (react-dom.development.js:20663)
    at commitLayoutEffects (react-dom.development.js:23426)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at commitRootImpl (react-dom.development.js:23151)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at commitRoot (react-dom.development.js:22990)
    at performSyncWorkOnRoot (react-dom.development.js:22329)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at flushSync (react-dom.development.js:22467)
    at Object.scheduleRefresh (react-dom.development.js:24429)
    at react-refresh-runtime.development.js:304
    at Set.forEach (<anonymous>)
    at Object.performReactRefresh (react-refresh-runtime.development.js:293)
    at RefreshUtils.js:62

Right above also these errors appear multiple times :

The above error occurred in the <DropTarget(MosaicDropTargetClass)> component:

    at DragDropContainer (http://localhost:3000/static/js/vendors~main.chunk.js:117175:7)
    at div
    at div
    at InternalMosaicWindow (http://localhost:3000/static/js/vendors~main.chunk.js:155751:43)
    at DragDropContainer (http://localhost:3000/static/js/vendors~main.chunk.js:117175:7)
    at DragDropContainer (http://localhost:3000/static/js/vendors~main.chunk.js:117175:7)
    at MosaicWindow (http://localhost:3000/static/js/vendors~main.chunk.js:156036:38)
    at component (http://localhost:3000/static/js/main.chunk.js:19965:5)
    at div
    at div
    at MosaicRoot (http://localhost:3000/static/js/vendors~main.chunk.js:155575:43)
    at div
    at MosaicWithoutDragDropContext (http://localhost:3000/static/js/vendors~main.chunk.js:155223:24)
    at http://localhost:3000/static/js/vendors~main.chunk.js:115427:23
    at Mosaic (http://localhost:3000/static/js/vendors~main.chunk.js:155377:38)
    at MosaicLayout (http://localhost:3000/static/js/main.chunk.js:13697:86)
    at div
    at div
    at PanelLayout (http://localhost:3000/static/js/main.chunk.js:6402:3)
    at AnnotationView
    at div
    at div
    at PanelLayout (http://localhost:3000/static/js/main.chunk.js:6402:3)
    at Annotation (http://localhost:3000/static/js/main.chunk.js:14620:80)
    at div
    at div
    at Scrollable (http://localhost:3000/static/js/main.chunk.js:6889:3)
    at div
    at div
    at PanelLayout (http://localhost:3000/static/js/main.chunk.js:6402:3)
    at AnnotationLayout (http://localhost:3000/static/js/main.chunk.js:12931:23)
    at Route (http://localhost:3000/static/js/vendors~main.chunk.js:181712:29)
    at RouteWithLayout (http://localhost:3000/static/js/main.chunk.js:11844:16)
    at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:181914:29)
    at Router (http://localhost:3000/static/js/vendors~main.chunk.js:181347:30)
    at ConnectedRouter (http://localhost:3000/static/js/vendors~main.chunk.js:38346:7)
    at ConnectedRouterWithContext (http://localhost:3000/static/js/vendors~main.chunk.js:38451:25)
    at ConnectFunction (http://localhost:3000/static/js/vendors~main.chunk.js:178374:75)
    at BagFileUploadProvider (http://localhost:3000/static/js/main.chunk.js:10820:85)
    at PanelProvider (http://localhost:3000/static/js/main.chunk.js:18400:21)
    at ServiceContainer (http://localhost:3000/static/js/vendors~main.chunk.js:182677:22)
    at ServiceProvider (http://localhost:3000/static/js/main.chunk.js:11987:3)
    at ModalProvider (http://localhost:3000/static/js/main.chunk.js:12519:81)
    at Provider (http://localhost:3000/static/js/vendors~main.chunk.js:112046:23)
    at ComposeProviders (http://localhost:3000/static/js/main.chunk.js:11211:5)
    at App
    at Provider (http://localhost:3000/static/js/vendors~main.chunk.js:178087:20)


The above error occurred in the <DropTarget(DragSource(InternalMosaicWindow))> component:

    at DragDropContainer (http://localhost:3000/static/js/vendors~main.chunk.js:117175:7)
    at MosaicWindow (http://localhost:3000/static/js/vendors~main.chunk.js:156036:38)
    at component (http://localhost:3000/static/js/main.chunk.js:19965:5)
    at div
    at div
    at MosaicRoot (http://localhost:3000/static/js/vendors~main.chunk.js:155575:43)
    at div
    at MosaicWithoutDragDropContext (http://localhost:3000/static/js/vendors~main.chunk.js:155223:24)
    at http://localhost:3000/static/js/vendors~main.chunk.js:115427:23
    at Mosaic (http://localhost:3000/static/js/vendors~main.chunk.js:155377:38)
    at MosaicLayout (http://localhost:3000/static/js/main.chunk.js:13697:86)
    at div
    at div
    at PanelLayout (http://localhost:3000/static/js/main.chunk.js:6402:3)
    at AnnotationView
    at div
    at div
    at PanelLayout (http://localhost:3000/static/js/main.chunk.js:6402:3)
    at Annotation (http://localhost:3000/static/js/main.chunk.js:14620:80)
    at div
    at div
    at Scrollable (http://localhost:3000/static/js/main.chunk.js:6889:3)
    at div
    at div
    at PanelLayout (http://localhost:3000/static/js/main.chunk.js:6402:3)
    at AnnotationLayout (http://localhost:3000/static/js/main.chunk.js:12931:23)
    at Route (http://localhost:3000/static/js/vendors~main.chunk.js:181712:29)
    at RouteWithLayout (http://localhost:3000/static/js/main.chunk.js:11844:16)
    at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:181914:29)
    at Router (http://localhost:3000/static/js/vendors~main.chunk.js:181347:30)
    at ConnectedRouter (http://localhost:3000/static/js/vendors~main.chunk.js:38346:7)
    at ConnectedRouterWithContext (http://localhost:3000/static/js/vendors~main.chunk.js:38451:25)
    at ConnectFunction (http://localhost:3000/static/js/vendors~main.chunk.js:178374:75)
    at BagFileUploadProvider (http://localhost:3000/static/js/main.chunk.js:10820:85)
    at PanelProvider (http://localhost:3000/static/js/main.chunk.js:18400:21)
    at ServiceContainer (http://localhost:3000/static/js/vendors~main.chunk.js:182677:22)
    at ServiceProvider (http://localhost:3000/static/js/main.chunk.js:11987:3)
    at ModalProvider (http://localhost:3000/static/js/main.chunk.js:12519:81)
    at Provider (http://localhost:3000/static/js/vendors~main.chunk.js:112046:23)
    at ComposeProviders (http://localhost:3000/static/js/main.chunk.js:11211:5)
    at App
    at Provider (http://localhost:3000/static/js/vendors~main.chunk.js:178087:20)

I don't know if this could be error in my code, but I have only one instance of Mosaic component and the error appears randomly. Sometimes when I add or remove MosaicWindow, sometimes right after page refresh and sometimes when I am not doing anything. But it is usually quite rare, only seems to appear more often after dev server hot reload.

Do you know what could be the cause of this?

Thank you for your help.

[gjvoosten]

I'm experiencing the same error, stacktrace:

Uncaught Error: Cannot have two MultiBackends at the same time.  MultiBackend.js:28
    setup MultiBackend.js:28
    handleRefCountChange DragDropManagerImpl.js:21
    dispatch Redux
    addTarget HandlerRegistryImpl.js:101
    registerTarget registration.js:3
    receiveType decorateHandler.js:149
    receiveProps decorateHandler.js:134
    componentDidMount decorateHandler.js:110
    React 6
    unstable_runWithPriority scheduler.development.js:653
    React 5
    unstable_runWithPriority scheduler.development.js:653
    React 21
    unstable_runWithPriority scheduler.development.js:653
    React 5
    promise callback*onNewData useBaseQuery.ts:34
    next QueryData.ts:278
    notifySubscription Observable.js:135
    onNotify Observable.js:179
    next Observable.js:235
    iterateObserversSafely ObservableQuery.ts:701
    iterateObserversSafely ObservableQuery.ts:701
    next ObservableQuery.ts:662
    invoke QueryManager.ts:518
    queryListenerForObserver QueryManager.ts:644
    broadcastQueries QueryManager.ts:1091
    broadcastQueries QueryManager.ts:1087
    broadcastQueries QueryManager.ts:1085
    subscription QueryManager.ts:1237
    next Observable.js:322
    notifySubscription Observable.js:135
    onNotify Observable.js:179
    next Observable.js:235
    next observables.ts:12
    next observables.ts:12
    notifySubscription Observable.js:135
    onNotify Observable.js:179
    next Observable.js:235
    next index.ts:61
    notifySubscription Observable.js:135
    onNotify Observable.js:179

This is after upgrading react-mosaic-component to 5.0.0. With 3.2.0 which we're currently using we do not have this problem.

[gjvoosten]

@nomcopter Any development on this issue in the past 6 months?

[mfranzs]

@gjvoosten Did you ever find a solution here?

[gjvoosten]

@gjvoosten Did you ever find a solution here?

@mfranzs No. We're still on 3.2.0.

[ilyabo]

Same issue here

[ilyabo]

Appears to go away when disabling React script mode

[alex-r-bigelow]

In case it's useful to reproduce, I hit this with React Router, navigating between two components on the same page that had different Mosaic instances. Not rendering Mosaic until each component has fully mounted seems to avoid this

[nomcopter]

Have you tried using MosaicWithoutDragDropContext and creating the context in root of your application in a place that doesn't change on navigation? Essentially putting this line in the root of your app https://github.com/nomcopter/react-mosaic/blob/master/src/Mosaic.tsx#L219

[gjvoosten]

@nomcopter Well, what do you know? Your suggested work-around actually works for me. I found a reproducible scenario, and after replacing <Mosaic /> with <MosaicWithoutDragDropContext /> and adding the <DndProvider options={HTML5ToTouch}>…</DndProvider> to my React root render, I could no longer force the error.

[alex-r-bigelow]

@gjvoosten any clues as to which versions of those libraries are working? I'm currently attempting:

"rdndmb-html5-to-touch": "^7.0.0-alpha.1",
"react-dnd-multi-backend": "^7.0.0-alpha.2",
"react-mosaic-component": "^5.1.0",

and hitting the "Could not find the drag and drop manager" error.

[gjvoosten]

@alex-r-bigelow We only have a direct dependency on react-mosaic-component, the rest (from react-dnd-* etc.) is transitive. From our yarn.lock:

[email protected]:
  version "5.1.0"
  resolved "https://registry.yarnpkg.com/react-mosaic-component/-/react-mosaic-component-5.1.0.tgz#73d69a50630f699e571a1d2f5168d8d45ea206fe"

react-dnd-multi-backend@^6.0.2:
  version "6.0.2"
  resolved "https://registry.yarnpkg.com/react-dnd-multi-backend/-/react-dnd-multi-backend-6.0.2.tgz#485878014dfbac46fcc898961871be6e5277c3f2"

No rdndmb-html5-to-touch.

We're using React 18.2.0.

[alex-r-bigelow]

Thanks; after fighting this for a few days, ended up just importing the version that installs with Mosaic, without adding it (or @types/react-dnd-multi-backend) to package.json. For posterity:

index.tsx

/* eslint-disable import/no-extraneous-dependencies */
import { DndProvider } from 'react-dnd-multi-backend';
import HTML5toTouch from 'react-dnd-multi-backend/dist/cjs/HTML5toTouch';

...

<DndProvider options={HTML5toTouch}>
  <App />
</DndProvider>

index.d.ts

declare module 'react-dnd-multi-backend';
declare module 'react-dnd-multi-backend/dist/cjs/HTML5toTouch';