Uncaught RangeError: Maximum call stack size exceeded at Array.toString (native)

[ratiw]

Version

4.0.0

Browser and OS info

Chrome 63.0.3239.132 (Official Build) (64-bit) / Windows 10

Steps to reproduce

• Go to this url to view the sample project on CodeSandbox.io
• Right-click the page and select "Inspect"
• In the Developer Tools window, click Vue menu to display Vue-Devtools
• Click on <app> on the left pane, the right pane should not cause any error
• Click on <Vuetable> node or its child component <VuetableRowHeader>, and it dumps error out in the console pane

What is expected?

Vue-Devtools should display info about the selected component.

Before 4.0.0, this never happens.

What is actually happening?

The following error shows up in console pane

backend.js:1 Uncaught RangeError: Maximum call stack size exceeded
    at Array.toString (native)
    at D (chrome-extension://nhdogjmejiglipccpnnnanhbledajbpd/build/backend.js:1:20128)
...

---

The old version of Vue-Devtools (before 4.0) was working fine without any error showing up.

[ibyteyou]

+1
maybe it somehow depends on the circular references into component data.
components in components...

screenshot

[filipesarturi]

Same problem here

[haoxutong]

same problem here

[Akryum]

You can test this branch: https://github.com/Akryum/vue-devtools/tree/types-improvements