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

shoma-mano commented 1 year ago

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

open chrome devtool.
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 commented 1 year ago

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?