Vue-devtools: Infinite loop on component click

[kamerat]

Version

4.1.0

Browser and OS info

Chrome 63 / Windows 10

Steps to reproduce

1. Open devtools
2. Go to vue tab -> components
3. single left click a component

Video 1; dev version of vue-devtools
Video 2

What is expected?

Component instance data on the right panel

What is actually happening?

infinite loop; serialized 40 instances....
When chrome reaches 1000 console logs it crashes

---

Happened after autoupdate

[Akryum]

Do you have a codepen to share?

[kamerat]

I have not since the code is enterprise 😞
However, I noticed my coworkers did not have this issue, so I suppose its on my end.
I removed the latest installed extension and it suddenly worked again. I tried to re-download the extension to confirm it being the issue but it still worked after re-install..

I cannot debug this anymore as I do not have the issue anymore. 🤔
Thank you for your time.

[kamerat]

I was too fast on my assumptions. I had stashed my changes and that's what made it work. However, this makes my code be the faulty part. I have debugged a bit and tried to create a more or less identical pen of my env.

Only difference is that on my end this pen is a component (the OrderForm from the video above) and some 3rd party components are commented out.

I did not manage to reproduce the issue in codepen due to me not knowing how to import files(components) there. There is however a issue related to the "cancel" button you see in the example. I believe this might be a pointer to the problem.

I managed to "fix" the problem locally on my dev env by removing the @click="visible.addProduct = false" event-listener on the button on line 122 and change the v-if="!visible.addProduct" to true on line 2 in the pen.

Is there something I'm doing wrong here, or is there something strange going on with buttons inside forms? 🤔

[Fmajor]

I don't know what happened but i met similar problem.
All things went smooth this afternoon. After dinner (about 5 hour ago), when i continued developing, there were wield "RangeError: Maximum call stack size exceeded" error when i clicked some of the components. If i turned off the plugin, they disappeared. The version of my Vue.js devtools was 4.0.1.

Then i remove this plugin and install it again with version 4.1.1, the problem is solved.

Could it caused by the process of plugin updating of chrome, because our problem started at similar time?

[Akryum]

@BlitZz96 Can you confirm the issue is solved by 4.1.1?

[Fmajor]

one more thing, i thing this issue is related to 'circular refs' (as i just see #550 ), because i remember it happened when i try to inspect into circular component or the circular component is updated.
i do not have this issue with 4.1.1

[kamerat]

@Akryum My issue is not resolved by 4.1.1

I have however found the sinner:

modifiedProducts() {
    return this.order.products.map(product => {
        const provider = this.order.providers.find(p => p.id == product.providerId);
        if (provider) {
            product.name += " (" + provider.name + ")";
        }
        return product;
    })
}

This computed function is feeding an select in my app with a modified object of products.
However, if I do not open the vue-devtools I do not have any issues, the computed only runs once. If I click the component that stores this computed function, it starts an Infinite loop. of the data returned from the function.

[Akryum]

You really shouldn't modify state in computed properties. This can indeed lead to infinite loops.

[Akryum]

You can enforce it with this eslint rule.

[kamerat]

Thank you for the tip @Akryum 👍 ❤️
However, this is just for code readability / predictability? Or are you saying that the issue is the fact that I'm modifying state inside the computed function?

[Akryum]

Or are you saying that the issue is the fact that I'm modifying state inside the computed function?

Yes, I'm quite sure about that :smile:

[kamerat]

Well, I feel bad for wasting your time then 😮 Appreciate your help! 😄
Thanks, Sensei ❤️