FlipRight click event not working

[cvrppradeep]

@ts1 @MaikoTan @siderisng @vivekKodira
In Vue 3 live server flip right click event not working.but in local it's working fine..
Can you help me to find out what is the issue.
please check this url - https://codesandbox.io/p/devbox/great-resonance-fgn7v9

[itr-tayyababbas]

@cvrppradeep hi,
are you facing the below issue
Getting Maximum recursive updates exceeded when trying to use the library in vue 3

[itr-tayyababbas]

i am getting same issue
ERROR
Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.
at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:252:58)
at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:275:7)
even I have used your component that you provide in codesandbox

[cvrppradeep]

@itr-tayyababbas hi,
No, im not getting any error,in mobile safari browser its working fine but in web it's not working.
The Screen is hanging up after click on Flipright button

[itr-tayyababbas]

ok might be its server side rendering so you don't face any issue regarding it

[itr-tayyababbas]

{{ $t("iu.lesson.ebookPage", { currentPage: flipbook.page, totalPages: flipbook.numPages ? flipbook.numPages : "∞", }) }}

<script> import { ref, onMounted } from "vue"; import Flipbook from "flipbook-vue"; import ChevronRightCircle from "vue-material-design-icons/ChevronRightCircle"; import ChevronLeftCircle from "vue-material-design-icons/ChevronLeftCircle"; import PlusCircle from "vue-material-design-icons/PlusCircle"; import MinusCircle from "vue-material-design-icons/MinusCircle"; import LottieLogoLoader from "lottie-vuejs/src/LottieAnimation.vue"; export default { name: "FlipBook", components: { Flipbook, ChevronRightCircle, ChevronLeftCircle, PlusCircle, MinusCircle, LottieLogoLoader, }, props: { flipbookData: { type: Object, default: () => ({}), }, }, setup(props) { const showFlipbookControls = ref(true); const flipbookPaths = ref([null]); onMounted(() => { if (props.flipbookData?.src?.path) { flipbookPaths.value = [ ...flipbookPaths.value, ...props.flipbookData.src.path, ]; } }); return { showFlipbookControls, flipbookPaths, }; }, }; </script> <style scoped lang="scss"> @import "@/assets/sass/_variables.scss"; .flipbook { width: 92vw; height: 86vh; max-height: 100%; max-width: 100%; overflow: hidden; } :deep(.bounding-box) { box-shadow: 0 0 20px #000; } .button-container { position: absolute; z-index: 99999; bottom: 0%; margin: auto; background: rgba(50, 142, 236, 0.8); border-radius: 16px; width: fit-content; text-align: center; padding: 10px; opacity: 1; color: $static-white; } .pageflip-button { margin: auto; padding: 0px 5px; } .zoom-button { margin: auto; padding: 0px 5px; } .flipbook-page-controller { padding: 0px 6px 3px 6px; border-radius: 8px; display: inline-block; color: $blue; background: $static-white; margin: 1px 4px; } .h-85 { height: 85vh !important; } .logo-loader { aspect-ratio: 16 / 7.75; align-items: center; display: flex; } .logo-loader-opacity { opacity: 0.7; } </style>

but you can utilize it for event handling because its working in my code just an console error occurs