vuejs / devtools-v6

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools-v6.vuejs.org/
MIT License
24.68k stars 4.14k forks source link

Cannot read properties of null (reading 'instanceMap') #1711

Open ssgnoe opened 2 years ago

ssgnoe commented 2 years ago

Version

6.0.6

Browser and OS info

Chrome 98.0.4758.80 (Offizieller Build) (x86_64) on Mac OS 12.2

Steps to reproduce

On every Nuxt.js (2.15.7) Application I have , the Devtools crashes after some changes in Code after Livereloads and click on a component which I changed recently.

Error: VM37312 backend.js:2198 Uncaught TypeError: Cannot read properties of null (reading 'instanceMap') at Bridge. (VM37312 backend.js:2198:55) at Bridge.emit (VM37312 backend.js:9851:5) at Bridge._emit (VM37312 backend.js:6486:12) at VM37312 backend.js:6412:42 at Array.forEach () at VM37312 backend.js:6412:18 at listener (VM37312 backend.js:13405:13)

After this crash I'm not able to get it working back again. After Reload it can not detect Vue.js on page. Restart Browser or Reinstall Extension works for about 30 Minutes, than it crashes again.

What is expected?

No crash, previous version worked fine

What is actually happening?

Crashes

ssgnoe commented 2 years ago

Maybe the problem just comes up, when Nuxt.js has an Error. Than pagereload is not enough to reload Devtools Component Structure. Clicking on the NuxtError Component displays a loader and logs the Error on top.

Akryum commented 2 years ago

Please provide a runnable reproduction. Thanks

fango256 commented 2 years ago

Just to say, we are not using nuxt and see this error consistently - every click on a component in the dev tools throws this 7+ times for us. Makes the tools unusable at the moment (perpetual loading bar).

Cannot easily create repro as it's a large enterprise app.

Akryum commented 2 years ago

You can always create a reproduction and by doing so finding the combination of libraries you use and setup code that makes this issue happen. Providing a runnable reproduction doesn't necessarily mean the entire project where you are experiencing the issue.

wrench1815 commented 2 years ago

Yes i see this error ocassionally. Let's say you update a component in your project like added a new prop in it. And then your try to manipulate the options of the component in devtools it will throw the error. Why? 'cuz for some reasons it is not able to track the changes that happened in the Component.

As for creating a reproduction, well from above you can see it is not possible to create one. It just happens like at runtime? This has nothing to do with any library.

Evertvdw commented 1 year ago

I am also having this issue consistently, also a large enterprise app. If I have some time left I will try to create a reproduction project, but that will probably take some time.

Evertvdw commented 1 year ago

@Akryum I have not yet created a reproduction but I can see in the code where it goes wrong. In my application the COMPONENT_ADDED hook is called before this line here where the selectApp function is called.

This means that when the walkComponentParents function is called the currentAppRecord is null inside the mark function here.

Normally the selectApp is called before and this problem does not occur. I cannot recreate a reproduction yet. I have currently stripped down my application to a bare minimum, just showing a blank page (using Quasar), so there is something in my setup that is causing this, I will try to dig a little deeper.

But maybe this is enough for you already to create a fix.

BenceSzalai commented 1 year ago

@Evertvdw : I am having the same issue also using Quasar for the very same reason as you have described.

But my error stack trace does not look like the one in the original issue, but more like #1892.

Not sure if these two are related or not...?

@Evertvdw: can you check if your stack trace is like https://github.com/vuejs/devtools/issues/1711#issue-1132108341 or like https://github.com/vuejs/devtools/issues/1892#issue-1276477020 ?

Can you maybe confirm that your issue is related to RouterView and KeepAlive as well?

I am using quasar.

quasar/app-vite@1.2.0
quasar/vite-plugin@1.3.0
vitejs/plugin-vue@4.0.0
vite@4.1.4
Evertvdw commented 1 year ago

@BenceSzalai Here is my error stack: image

I am just using the router-view normally, no keep-alive used anywhere.

BenceSzalai commented 1 year ago

@Evertvdw Based on the stack trace your issue is #1892 as well, instead of this one.

ishaiavrahami commented 9 months ago

same here