Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
EnkeyMC opened this issue Apr 22, 2021 · 12 comments
Open

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

EnkeyMC opened this issue Apr 22, 2021 · 12 comments

Comments

@EnkeyMC
Copy link

EnkeyMC commented Apr 22, 2021 •
edited
Loading

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
Copy link

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
Copy link

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

@mfranzs
Copy link

mfranzs commented Jan 26, 2022

@gjvoosten Did you ever find a solution here?

@gjvoosten
Copy link

@gjvoosten Did you ever find a solution here?

@mfranzs No. We're still on 3.2.0.

@ilyabo
Copy link

ilyabo commented May 11, 2022

Same issue here

@ilyabo
Copy link

ilyabo commented May 11, 2022

Appears to go away when disabling React script mode

@dvzacharycutler dvzacharycutler mentioned this issue May 12, 2022
Merged
15 tasks
@alex-r-bigelow
Copy link

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
Copy link
Owner

nomcopter commented Jul 13, 2022 •
edited
Loading

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
Copy link

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

gjvoosten added a commit to NCI-Agency/anet that referenced this issue Jul 21, 2022
@gjvoosten
Add suggested work-around for Mosaic error
c602d23 
See nomcopter/react-mosaic#162 (comment)
@alex-r-bigelow
Copy link

alex-r-bigelow commented Jul 21, 2022 •
edited
Loading

@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
Copy link

@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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@ilyabo @gjvoosten @mfranzs @nomcopter @alex-r-bigelow @EnkeyMC