Feature to select a component by clicking UI doesn't work in SSR

[shoma-mano]

Vue devtools version

6.4.5

Link to minimal reproduction

https://sfc.vuejs.org/#__SSR__eNp9UEkOwjAM/EqUCxea3KsICfGNXFgMFDWL7LQcqv4dJ0WlLOKWGc+MnRnkNkbVdyBraeiITUyCIHVxY33jYsAkdtemPYkzBidWSheUDSvrjZ4crGWQwMV2n4CRMEW2MZOcGaPnsVzLKbly+6huFDzvHtgk7HNAVtaiMJnjXRlbeU0pUq01nY/5gBupgBfNL4WdT40DBeSqA4Y7AXKwletFhmayB6wQ/AkQ8F/mh/QrN8eO1o/8lbmPHwUu+nlrR5g8zZcVd2H0ZHi1ND4AuJ6OCw==

Steps to reproduce & screenshots

1. open chrome devtool.
2. get p element rendered by Child component and show its property.

p element has a __vueParentComponent in property when SSR is OFF, but it doesn't when SSR is ON.

What is expected?

can select component by clicking UI also when SSR is ON.

What is actually happening?

When I use Nuxt3, I can't use this feature in pages rendered in server side.
I tried SSR off in nuxt.config.ts, then I can select a component by clicking.

System Info

System:
    OS: macOS 13.0
    CPU: (10) arm64 Apple M1 Pro
    Memory: 279.63 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.2.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.1.3 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 108.0.1
    Safari: 16.1

Any additional comments?

I'm not sure, but I think Devtools can't traverse component tree because element does not have __vueParentComponent property in SSR.

app-backend-vue3/lib/components/el.js

function getComponentInstanceFromElement(element) {
    return element.__vueParentComponent;
}

[TechAkayy]

I'm having the same issue, no __vueParentComponent with SSR. Works when I navigate to a different route, and come back. I wonder if not having __vueParentComponent means hydration issue without showing a warning/error message?

[LinusBorg]

It's an issue in Vue Core. That property is only set when an element is being mounted - which doesn't happen during hydration.

Basically, this:

https://github.com/vuejs/core/blob/bef85e7975084b05af00b60ecd171c83f251c6d5/packages/runtime-core/src/renderer.ts#L685-L694

also has to be done somewhere here in hydrateElement():

https://github.com/vuejs/core/blob/bef85e7975084b05af00b60ecd171c83f251c6d5/packages/runtime-core/src/hydration.ts#L301-L308

[goodpixels]

Very frustrating, this happens for me too, using latest dev tools and nuxt.