Getting Maximum recursive updates exceeded when trying to use the library

[p1pah]

Good evening,

I have attempted to use this library in vue3 a couple of times now, but have had 0 luck. I can't get it working with even the most basic of examples. Try turning the page by clicking or dragging on the image, and you will see in the console that the library yields:
Uncaught (in promise) 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.

Any help would be greatly appreciated, attached is a code sandbox to replicate the issue..

Codesandbox:
https://codesandbox.io/p/devbox/flipbook-vue3-trwkdm?file=%2Fsrc%2FApp.vue%3A2%2C1

[p1pah]

[Pikiko14]

U solve this issues??

[p1pah]

@Pikiko14 I did, anyone running into this, it is something to do with the package-lock.json file. Make sure you fork the repo from github rather than cloning the npm package. Once I forked the repo, it worked like 🧈

[itr-tayyababbas]

vue 2 related npm package is working fine but after migration into vue 3 the updated vue 3 flipbook version is producing this error

[p1pah]

@itr-tayyababbas it's a package-lock.json issue, you need the one from his repo...

[nieyankai]

I've got the same error， any solutions?

[p1pah]

@nieyankai you need to fork his repo, it has the correct resolution for the package-lock.json file..

[jeffreykthomas]

I get the same error when I use the <script src="https://unpkg.com/flipbook-vue"></script>

But when I fork the repo and try to roll it up I get other errors during the roll up regarding mismatched package versions.

I can get it to work within a project I build using vite or web pack, but currently I need to import the library using an external source.

Has anyone had success building a js or min.js file that doesn't produce the recursive error?

[jeffreykthomas]

This is the error during rollup

I git clone the project
cd to directory
npm install
npm run dist

Vue packages version mismatch:

- [email protected] (/Users/jeffreythomas/Documents/flipbook-vue3/node_modules/vue/index.js)
- [email protected] (/Users/jeffreythomas/Documents/flipbook-vue3/node_modules/vue-template-compiler/package.json)

This error is because I'm using vue3 which doesn't use vue-template-compiler...

[jeffreykthomas]

I migrated to @evanscho pr, and was able to build the js files, but still received the maximum recursive error.
Made some changes to Flipbook.vue, in particular regarding the reactivity of minX and maxX. Will pr with all the changes that eliminated the errors

[jeffreykthomas]

Pr here: #116

[peaeater]

I had this problem while using Vue 3.5.12. When I rolled back to Vue 3.4.38 (the last release on the 3.4.x branch), the problem went away. I also tried @jeffreykthomas PR with 3.5.12, and that worked too, except that the page flip animation contains a number of jagged artifacts, as somebody already pointed out in comments on that PR. Which is a shame, because otherwise great work by @jeffreykthomas (and @evanscho).

[alectrocute]

I had this problem while using Vue 3.5.12. When I rolled back to Vue 3.4.38 (the last release on the 3.4.x branch), the problem went away. I also tried @jeffreykthomas PR with 3.5.12, and that worked too, except that the page flip animation contains a number of jagged artifacts, as somebody already pointed out in comments on that PR. Which is a shame, because otherwise great work by @jeffreykthomas (and @evanscho).

@peaeater Have you found a solution to the jagged artifacts?

[n4ff4h]

I had this problem while using Vue 3.5.12. When I rolled back to Vue 3.4.38 (the last release on the 3.4.x branch), the problem went away. I also tried @jeffreykthomas PR with 3.5.12, and that worked too, except that the page flip animation contains a number of jagged artifacts, as somebody already pointed out in comments on that PR. Which is a shame, because otherwise great work by @jeffreykthomas (and @evanscho).

Hi thanks, this worked for me.