TypeError: Cannot read properties of null (reading 'instanceMap')

[ab-vyas]

Version

6.1.4

Browser and OS info

chrome Version 102.0.5005.61 (Official Build) (64-bit)

Steps to reproduce

just open console

What is expected?

console error should not be there.

What is actually happening?

backend.js:747 An error occurred in hook 'walkComponentParents' with payload: {componentInstance: {…}, parentInstances: Array(0)} callHandlers @ backend.js:747 callHook @ backend.js:227 walkComponentParents @ backend.js:305 (anonymous) @ backend.js:2056 await in (anonymous) (async) emit @ VM35702:1 _replayBuffer @ VM35702:1 on @ VM35702:1 connect @ backend.js:2039 await in connect (async) initBackend @ backend.js:1951 await in initBackend (async) handshake @ backend.js:14197 postMessage (async) n @ proxy.js:1 (anonymous) @ proxy.js:1 (anonymous) @ proxy.js:1 backend.js:748 TypeError: Cannot read properties of null (reading 'instanceMap') at ComponentWalker.mark (backend.js:6588:51) at ComponentWalker.captureId (backend.js:6491:10) at ComponentWalker.getComponentParents (backend.js:6382:10) at backend.js:6781:40 at DevtoolsHookable.callHandlers (backend.js:745:17) at DevtoolsApi.callHook (backend.js:227:29) at DevtoolsApi.walkComponentParents (backend.js:305:32) at Object. (backend.js:2056:61)

[konpeki622]

Can you provide a reproduction?

[zhuyunxia]

我也遇到同样的错误，我在vue2项目中使用vue3+elementplus组件，通过createApp().mount创建，开发工具报错 Version：6.1.4

[BenceSzalai]

Here's an analysis of one particular situation in which this happens: https://github.com/vuejs/devtools/issues/1711#issuecomment-1441915959

I am experiencing the very same issue for the very same reason as described in that comment.

However, I'm posting here, because this issue matches my stack trace better:

backend.js:748 An error occurred in hook 'walkComponentParents' with payload: {componentInstance: {…}, parentInstances: Array(0)}
backend.js:749 TypeError: Cannot read properties of null (reading 'instanceMap')
    at ComponentWalker.mark (backend.js:6802:51)
    at ComponentWalker.captureId (backend.js:6703:10)
    at ComponentWalker.getComponentParents (backend.js:6594:10)
    at backend.js:6997:40
    at DevtoolsHookable.callHandlers (backend.js:746:17)
    at DevtoolsApi.callHook (backend.js:227:29)
    at DevtoolsApi.walkComponentParents (backend.js:306:32)
    at Object.<anonymous> (backend.js:2063:61)

It started occurring when I wrapped my RouterView component into KeepAlive. So the very same application causes no issues as long as my Router View is set up like this:

    <RouterView/>

But since I have it like this:

    <RouterView v-slot="{ Component }">
      <KeepAlive>
        <component :is="Component" />
      </KeepAlive>
    </RouterView>

my console is flooded with the errors, and inspecting a bit I've found it is caused by the same reason: The COMPONENT_ADDED hook (global_hook_1.hook.on(shared_utils_1.HookEvents.COMPONENT_ADDED, async (app, uid, parentUid, component) => { (as seen in my DevTools debugger) runs at a time when the this.ctx.currentAppRecord is null, while mark(instance, force = false) { tries to access this.ctx.currentAppRecord.instanceMap on it.

It does not happen until I navigate in the app in a way that none of the inactive components are revisited from the <KeepAlive>. But as soon as I go back to a route where the inactive component is re-activated, the console is flooded with errors.

[BenceSzalai]

Update: It just looked like it was related to KeepAlive, but it is not. The rest of the information is still valid.

[toddsampson]

Did you ever figure out what was happening? I'm seeing the same issue.

[claylevering]

Going to issue a PR to slightly adjust for this. I'm not entirely sure how it's happening or what should / shouldn't have happened but a small amount of property checking should at least prevent the massive error logging. In my case, it looks like there were (for some reason) hundreds and hundreds of VTooltipDirectiveApp running around. Additionally, these had the special property of both not having their devtools enabled AND not matching equality on any of the appRecords so getAppRecord return a LOT of null with pure misses. Forgive the terrible hack debug attempts in this screenshot

[claylevering]

Bump - I'd like this in production so I don't have to zip a package for my dev team please

[claylevering]

Buuuuuuump