devtools [BUG] Dev tools fails to inspect component containing objects with "_isVue", throws errors and locks up devtools

[BUG] Dev tools fails to inspect component containing objects with "_isVue", throws errors and locks up devtools

Open douglasg14b opened this issue 2 years ago • 4 comments

Version

6.1.4

Browser and OS info

Chrome 99.0.4844.74

Steps to reproduce

Create a Vue 2 component
Create a class that includes a public _isVue = true;
Instantiate this class in your component assigning it to a data field
Go to the inspector, and click on your component in the component tree
Observe infinite loading
Observe console errors

What is expected?

That the component is inspected.

What is actually happening?

The inspector will infinitely load for that component, and the following errors show up in the console:

backend.js:7028 [Bridge] Error in listener for event b:component:selected-data with args: ['app-1:308'] wrappedListener @ backend.js:7028 await in wrappedListener (async) emit @ backend.js:10542 _emit @ backend.js:7098 (anonymous) @ backend.js:7011 (anonymous) @ backend.js:7011 listener @ backend.js:14172 postMessage (async) n @ proxy.js:1

backend.js:7029 TypeError: Cannot read properties of undefined (reading 'props') at processProps (backend.js:3982:35) at getInstanceState (backend.js:3925:10) at Object.getCustomInstanceDetails (backend.js:3933:17) at getCustomInstanceDetails (backend.js:6908:36) at backend.js:8356:82 at EncodeCache.cache (backend.js:8252:22) at Object.replacer (backend.js:8356:26) at encode (backend.js:8006:38) at encode (backend.js:8017:19) at encode (backend.js:8007:21)

This is a workaround prevent Vue making an object contained in a component reactive when it doesn't need to be, or when such reactivity causes crippling performance concerns, such as with Babylon.js. It works as expected.

This was not a problem before the dev tools update.