ComponentWalker.getInternalInstanceChildren -- Cannot read properties of null (reading 'component')

[Aareksio]

Version

6.0.12

Browser and OS info

Chrome 98 / Windows 10

Steps to reproduce

1. Open nuxt 3 dev page on localhost
2. Launch Chrome DevTools
3. Go to Vue tab
4. Go back to Console tab
5. Press f5 to refresh

What is expected?

Page reloads, Vue DevTools are functional, no errors are logged to console

What is actually happening?

From time to time a multiple errors are thrown thrown:

An error occurred in hook 'walkComponentTree' with payload:
  componentInstance: [cut for readibility]
  componentTreeData: null
  filter: ""
  maxDepth: 1


TypeError: Cannot read properties of null (reading 'component')
    at ComponentWalker.getInternalInstanceChildren (backend.js:6009:17)
    at ComponentWalker.getInternalInstanceChildren (backend.js:6015:25)
    at ComponentWalker.capture (backend.js:6067:27)
    at ComponentWalker.findQualifiedChildren (backend.js:5969:26)
    at ComponentWalker.getComponentTree (backend.js:5939:17)
    at backend.js:6329:48
    at DevtoolsHookable.callHandlers (backend.js:702:17)
    at DevtoolsApi.callHook (backend.js:192:29)
    at DevtoolsApi.walkComponentTree (backend.js:246:32)
    at sendComponentTreeData (backend.js:1430:46)

The errors are thrown with componentInstance (simplified):

1st error

{ 
  "uid": 56,
  "props": { "mode": "out-in" },
  "type": { "name": "BaseTransition" },
  "parent": {
    "uid": 55,
    "props": { "name": "page", "mode": "out-in" },
    "parent": {
      "uid": 54,
      "type": { "name": "RouterView" } 
    }
  }
}

2nd error

{
  "uid": 55,
  "props": { "name": "page", "mode": "out-in" },
  "parent": {
    "uid": 54,
    "type": { "name": "RouterView" } 
  }
}

It seems to me something with vue-router's <router-view> (possibly <suspense>) is causing the issue.

Below is the screenshot of the console:

---

This error does not happen every time, but it is often enough to pop at least once an hour during development. I haven't found a stable reproduction yet. Of course, I am not expecting you to fix an error without reproduction, but rather a direction of where to look for the root cause. I am also aware the issue may be (and is likely) caused by particular way nuxt 3 does something, not vue-devtools themselves.

The project I am experiencing issues with is relatively small, the only major dependencies are:

nuxt3
@fortawesome/vue-fontawesome
@intlify/nuxt3
@pinia/nuxt
@popperjs/core

This also seems to affect only my Windows 10 environment, as another dev working from MacOS is not reporting experiencing similar problems.

I am once again sorry for not providing meaningful reproduction, but I do not see any prior issues with ComponentWalker.getInternalInstanceChildren reported. Perhaps just the stack trace is enough to give you a clue.

[symmetriq]

Seeing the same issue here (with 6.0.12). The previous beta version (6.0.0.21) doesn't have this issue, so I just reverted to that for now.

I'm not using Nuxt. Just Vue 2 and Vue 3. We have a couple legacy pages that still use Vue 2 components, but most pages only have Vue 3 components.

[ffxsam]

Just ran into this as well. Vite SSR project.

I've got this in App.vue:

<template>
  <div>
    <router-view v-slot="{ Component }">
      <Suspense>
        <component :is="Component" />
      </Suspense>
    </router-view>
  </div>
</template>

And in the component being rendered by the router:

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);

if (!import.meta.env.SSR) {
  await new Promise(resolve => setTimeout(resolve, 2000));
  count.value = 110;
}
</script>

This causes Vue DevTools to throw An error occurred in hook 'walkComponentTree' with payload

[lengocan14]

Have you resolve this issue? @Aareksio I just met it in version 6.2.1 And I have solved it. Solution is go to extension setting and check Allow in Private and Allow access to file URLs

Hope this help.

[Aareksio]

@lengocan14 Thanks for the solution!

Honestly I do not recall seeing the issue recently. Perhaps the fix from 9606ae358ff1b032e95bb45e7a0dee8f85d9907e or some other change solved it and you encountered some other, similar problem.

[vedmant]

I have the same issue with Nuxt 3, it started to show error when I set ssr: false in nuxt configuration. I don't see any configuration mentioned above in current Vue devtools.