States lost after HMR

[konpeki622]

Version

6.0.0 beta 19

Browser and OS info

Chrome 93.0.4577.63, Windows 10

Steps to reproduce

1. init a project with vue 3.x
2. get components by filter and select one
3. edit some variables in this component and trigger HMR

I created example to reproduce it.

What is expected?

New values were shown on the devtools panel.

What is actually happening?

States lost.

Before:

After HMR:

[konpeki622]

In vue2.x, the component which is selected will go unselected after HMR but state panel shows old state values.

[nsrosenqvist]

Experiencing this issue too with Vite v5 HMR. These two messages is what we see when enabling the debug log:

Timed out getting app record for app Timed out waiting for app record

We use Vue + TypeScript + Vite. Looking at the HMR request, we see that the HMR id remains the same, but for some reason this still happens.

[nsrosenqvist]

I pulled down the development environment and am currently investigating this issue through the chrome dev environment. It appears that it is working fine as long as there are more than one component in a component tree, but when there's only a single one, and I try to select it in the component tree after a HMR update, Vue Devtools seems to get confused and app-1:root gets replaced in the instance map by app-1:1. Therefore, it doesn't find the app record for app-1:root any longer. @konpeki622 @Akryum any idea where I should start looking?

[x0rsw1tch]

@nsrosenqvist I've been trying to figure out why this was occurring on some components I've been working on. vue-devtools in the browser just seems to "forget" where the app is, and refuses to update after an HMR change, have to reload the page to fix.

Per your findings, I tried attaching a simple component to one of the troubled .vue files I'm working on, which previously had no child components on it... With that dummy component attached to the root instance, it continues to function within vue-devtools after an HMR update now, strange! It also seems to work fine by adding one of the built-in components. I tacked on a <transition /> to the end of the template, and that also seems to fix it.

FWIW, when it's not working, and have debugging info enabled, this shows up in the log:

Instance uid=cloudagentsworldmappoints:root not found
getComponentInstance @ backend.js:1596
sendSelectedComponentData @ backend.js:1497
(anonymous) @ backend.js:2315
wrappedListener @ backend.js:7245
emit @ backend.js:10901
_emit @ backend.js:7293
(anonymous) @ backend.js:7231
(anonymous) @ backend.js:7231
listener @ backend.js:14531
postMessage (async)
n @ proxy.js:1
Show 1 more frame

[nsrosenqvist]

@x0rsw1tch It sounds like the same issue to me. The component mentioned with the uid in Instance uid=cloudagentsworldmappoints:root not found is probably now mapped to cloudagentsworldmappoints:1 instead. I haven't been able to figure out yet where one would fix this in the codebase.

[x0rsw1tch]

@nsrosenqvist I don't personally understand the inner workings of how this app works, but I did do a little digging, by setting up some breakpoints along the call stack to try and suss out where the root cause might be coming from.

So when I have these single-compose Vue instances setup, and an HMR event occurs, eventually getComponentInstance() is called, and a list of appRecord's are passed along too. There are three Vue instances on this page, so there should be three appRecords, but only one is seen in getComponentInstance(), after HMR.

When I add the dummy <transition /> to the app there is a considerable change to appRecord when getComponentInstance() is called, after HMR.

Not really sure how to interpret this discrepancy