Vue3 recursion limit exceeded

[megasanjay]

Description

I'm using the flicking component to render a list from the demo examples but I keep getting a 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. warning.

This breaks the built version of my application and causes the browser tab to freeze.

Steps to check or reproduce

<Flicking :options="{ circular: true }">
  <div v-for="idx in list" class="flicking-panel w-80" :key="idx">{{ idx }}</div>
</Flicking>

import Flicking from "@egjs/vue3-flicking";
import "@egjs/vue3-flicking/dist/flicking.css";

components: {
     Flicking
},
data() {
  return {
    list: [0, 1, 2, 3, 4],
  }
}

Not sure if it's an issue with my implementation or something else.

[WoodNeck]

Hello @megasanjay!
I've tested your code on my local environment, but it renders fine without any errors.
I wonder isn't there any code that modifies list of yours?

[megasanjay]

I could also swear it was working on my webpage before deploying as well. It is very strange. To answer your concern, I can confirm that list is only touched in that one component.

I wonder if this helps anybit:

[WoodNeck]

Strange, does that mean it happens only when it's in the production build?

[megasanjay]

The recursion limit is only present in our dev environment. On prod build, the component gets in some kind of loop and causes the component to not mount leading to a browser freeze. I can try and see if I can reinstall and start the process from start again but it seems to an extreme edge case with my project.

[megasanjay]

I wonder if the actual code would help you understand the issue. Attaching a link to the component here.

This is a different instance but It has the same issue. The v-for inside is only used to display the data coming in from the parent component. It is a static data source so there should not be anything modifying the list anywhere in the application.

[WoodNeck]

Great, I was just wondering if I could get it. Is it okay to check main branch of your repository? or new-carousel?

[megasanjay]

Absolutely, I created the new-carousel branch to investigate this issue myself so feel free to use that branch.

[WoodNeck]

@megasanjay
After some research, I found out that Flicking is not fully compatible with the newer version of Vue3.
By downgrading the vue and @vue/compiler-sfc to 3.1.1 I could remove the issue on your project.
Of course this is not a recommended solution, I'll fix Flicking to work well with the latest version.

[megasanjay]

@WoodNeck I figured that might have been the issue. Thank you for checking that for me. I will downgrade our versions so that we can build it at this time but please drop a mention when you do make the Flicking library compatible with the newer version of Vue. I absolutely love this library and y'all did a great job with this one. All the best mate. Cheers :)

[WoodNeck]

@megasanjay
Of course! I've already made a PR that fixes this issue :)

[megasanjay]

@WoodNeck That was quick!. Let me know when it get pushed up to the main branch :)