Error in mounted hook: "RangeError: Maximum call stack size exceeded" VUEJS - vue.js

Question

I have following router.js in my vuejs app
import Vue from 'vue'
import Router from 'vue-router'
import {client_auth, annotator_auth} from './middleware/auth'
import {reroute_home} from '#/middleware/reroute'
import Editor from './components/editor/Editor.vue'
Vue.use(Router)
const router = new Router({
{
path: '/annotator/studio',
name: 'annotator_studio',
component: Editor,
props: (route) => ({
image_id: route.query.q
}),
meta: {
title: "Annotation Studio",
middleware: annotator_auth
}
}
]
})
function nextFactory(context, middleware, index) {
const subsequentMiddleware = middleware[index];
if (!subsequentMiddleware) return context.next;
return (...parameters) => {
context.next(...parameters);
const nextMiddleware = nextFactory(context, middleware, index + 1);
subsequentMiddleware({ ...context, next: nextMiddleware });
};
}
router.beforeEach((to, from, next) => {
if (to.meta.middleware) {
const middleware = Array.isArray(to.meta.middleware)
? to.meta.middleware
: [to.meta.middleware];
const context = {
from,
next,
router,
to,
};
const nextMiddleware = nextFactory(context, middleware, 1);
return middleware[0]({ ...context, next: nextMiddleware });
}
return next();
});
export default router;
and following is my Editor.uve
<template>
<div id="container">
<div id="view-item">
<app-view/>
</div>
</div>
</template>
<script>
import View from './view/View.vue'
export default {
components: {
'app-view': View,
}
}
</script>
<style scoped>
#container {
display: flex;
flex-flow: column;
height: 100%;
}
#stepper-item {
flex: 0 1 auto;
margin: 5px;
}
#view-item {
display: flex;
flex: 1 1 auto;
margin: 0px 5px 5px 5px;
}
</style>
In this Editor.uve i am importing a child view called View.vue. Following is my View.vue
<template lang="html">
<div
id="view"
class="elevation-2 pointers-please">
<app-osd-canvas/>
<app-annotation-canvas/>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import OSDCanvas from './OSDCanvas.vue'
import AnnotationCanvas from './AnnotationCanvas.vue'
export default {
components: {
'app-osd-canvas': OSDCanvas,
'app-annotation-canvas': AnnotationCanvas
},
computed: {
...mapState({
projectImageName: state => state.image.projectImageName
})
},
async mounted () {
await this.setProjectImageName('demo')
this.loadDemo()
},
methods: {
...mapActions({
setProjectImageName: 'image/setProjectImageName',
loadDemo: 'editor/loadDemo',
loadProject: 'editor/loadProject'
})
}
}
</script>
<style scoped>
#view {
position: relative;
display: flex;
flex: 1 1 auto;
}
</style>
In this View.vue again i am importing a child component called OSDCanvas.
My OSDCanvas.uve looks like following.
<template lang="html">
<div id="osd-canvas" />
</template>
<script>
import { mapActions } from 'vuex'
export default {
mounted () {
this.setupOsdCanvas('osd-canvas')
},
methods: {
...mapActions({
setupOsdCanvas: 'image/setupOsdCanvas'
})
}
}
</script>
<style>
#osd-canvas {
position: absolute;
height: 100%;
width: 100%;
}
</style>
I am facing following error when i hit /annotator/studio route
[Vue warn]: Error in mounted hook: "RangeError: Maximum call stack size exceeded" found in
---> <AppOsdCanvas> at src/components/editor/view/OSDCanvas.vue
<AppView> at src/components/editor/view/View.vue
<Editor> at src/components/editor/Editor.vue
<VContent>
<VApp>
<App> at src/App.vue
<Root>
I have tried some online solutions as well but the issue is still the same. Any help is appreciated.
UPDATE
following is image/setupOsdCanvas in actions.js in store
setupOsdCanvas: ({
commit
}, payload) => {
commit('setupOsdCanvas', payload)
},
and foloowing is setupOsdCanvas in mutations.js in store
setupOsdCanvas: (state, payload) => {
state.OSDviewer = new openseadragon.Viewer({
id: payload,
showNavigationControl: false,
showNavigator: true,
navigatorId: 'navigator',
maxZoomPixelRatio: 2
})
// Prevent rotation and 'flipping' of the image through the default keybaord
// shortcuts, R and F. (these were conflicting with other annotation tool
// shortcuts when the image was open)
state.OSDviewer.addHandler('canvas-key', e => {
if (e.originalEvent.code === 'KeyR' || e.originalEvent.code === 'KeyF') {
e.preventDefaultAction = true
}
})
}