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

Question

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

EnkeyMC opened this issue 3 years ago · comments

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.

Gertjan van Oosten · Answer 1 · Tue May 04 2021 22:05:25 GMT+0800 (China Standard Time)

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.

Gertjan van Oosten · Answer 2 · Thu Nov 04 2021 21:53:21 GMT+0800 (China Standard Time)

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

Martin Schneider · Answer 3 · Wed Jan 26 2022 14:28:30 GMT+0800 (China Standard Time)

@gjvoosten Did you ever find a solution here?

Gertjan van Oosten · Answer 4 · Wed Jan 26 2022 15:25:30 GMT+0800 (China Standard Time)

@gjvoosten Did you ever find a solution here?

@mfranzs No. We're still on 3.2.0.

Ilya Boyandin · Answer 5 · Thu May 12 2022 00:25:01 GMT+0800 (China Standard Time)

Same issue here

Ilya Boyandin · Answer 6 · Thu May 12 2022 00:38:35 GMT+0800 (China Standard Time)

Appears to go away when disabling React script mode

Alex Bigelow · Answer 7 · Thu Jul 14 2022 02:28:15 GMT+0800 (China Standard Time)

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

Kevin Verdieck · Answer 8 · Thu Jul 14 2022 03:35:44 GMT+0800 (China Standard Time)

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

Gertjan van Oosten · Answer 9 · Thu Jul 21 2022 23:02:41 GMT+0800 (China Standard Time)

@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 Bigelow · Answer 10 · Fri Jul 22 2022 00:18:34 GMT+0800 (China Standard Time)

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

Gertjan van Oosten · Answer 11 · Mon Jul 25 2022 15:26:10 GMT+0800 (China Standard Time)

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

react-mosaic-component@5.1.0:
  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 Bigelow · Answer 12 · Tue Jul 26 2022 04:00:54 GMT+0800 (China Standard Time)

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';