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

[janl99]

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

我遇到了与你一样的问题，我跟踪了一下错误堆栈，大概是因为在递归动画的过程触发了Vue的错误提示，如果你的浏览器尺寸较小，显示单页面，没有拼合动画的时候，就不会触发这个问题。

[itr-tayyababbas]

@janl99 Thank you for the insight! That makes a lot of sense. It seems that the recursive animation error is tied to the splicing animation process, as you mentioned. I noticed that when I reduce my browser size to display a single page without the animation, the error doesn’t occur. Do you have any recommendations on how to prevent this error while keeping the splicing animation enabled? Any tips on optimizing the animation logic would be greatly appreciated!