(hmr/keep-alive): After hmr, the page cannot be switched normally

[zhulh-dev]

Vue version

3.2.45

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-knceak?file=src%2FDemoA.vue,src%2FApp.vue&terminal=dev

Steps to reproduce

When I do not modify any code, the operation is very normal, and the DemoA page and DemoB page can be switched normally. However, if DemoA.vue or DemoB.vue is modified, the page switching will be invalid and there will be no error message. I have tried many versions. All versions have this problem. After deleting keep-alive, it will be normal

What is expected?

DemoA and DemoB can be opened normally after hmr

What is actually happening?

After hmr, the page cannot be switched normally, just like this page does not exist

System Info

No response

Any additional comments?

No response

[yyx990803]

Are you sure this is reproducible with the latest version of Vue? The reproduction is working fine for me.

[zhulh-dev]

Are you sure this is reproducible with the latest version of Vue? The reproduction is working fine for me.

reproduction.mp4

Is there a problem with my node version?

[zhangzhonghe]

Are you sure this is reproducible with the latest version of Vue? The reproduction is working fine for me.

I can reproduce it. It must be to change DemoA with DemoA displayed, then wait for hmr to finish before switching to DemoB.

[zhangzhonghe]

It seems to be caused by here:

core/packages/runtime-core/src/components/BaseTransition.ts

Line 207 in 64e6d92

const oldInnerChild = oldChild && getKeepAliveChild(oldChild)

When hmr is done, the oldInnerChild here is expired.

[laterdayi]

@yyx990803 No updates yet?

[laterdayi]

vuejs/router#1655