keepAlive with Dynamic Components setup hmr error

[yuntian001]

Vue version

3.2.37

Link to minimal reproduction

https://github.com/yuntian001/keepAliveError

Steps to reproduce

• npm install
• npm run dev
• editor src\components\HelloWorld.vue const aa = ref('1234') to const aa = ref('hello')

What is expected?

no error

What is actually happening?

runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <KeepAlive> 
  at <RouterView> 
  at <App>

runtime-core.esm-bundler.js:6070 Uncaught (in promise) TypeError: parentComponent.ctx.deactivate is not a function
    at unmount (runtime-core.esm-bundler.js:6070:33)
    at patch (runtime-core.esm-bundler.js:5054:13)
    at sharedContext.activate (runtime-core.esm-bundler.js:2435:13)
    at processComponent (runtime-core.esm-bundler.js:5480:37)
    at patch (runtime-core.esm-bundler.js:5085:21)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5695:17)
    at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
    at instance.update (runtime-core.esm-bundler.js:5729:56)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:36)
    at flushJobs (runtime-core.esm-bundler.js:388:17)

System Info

System:
    OS: Windows 10 10.0.17763
    CPU: (16) x64 Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz
    Memory: 5.56 GB / 15.86 GB
  Binaries:
    Node: 16.15.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.5.0 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Internet Explorer: 11.0.17763.771
  npmPackages:
    vue: ^3.2.37 => 3.2.41

Any additional comments?

I saw this error mentioned, but it was closed. Please focus on it.

[zhangzhonghe]

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

Lines 306 to 315 in 0841b9b

	if (cachedVNode) {
	// copy over mounted state
	vnode.el = cachedVNode.el
	vnode.component = cachedVNode.component
	if (vnode.transition) {
	// recursively update transition hooks on subTree
	setTransitionHooks(vnode, vnode.transition!)
	}
	// avoid vnode being mounted as fresh
	vnode.shapeFlag |= ShapeFlags.COMPONENT_KEPT_ALIVE

In this case, the shapeFlag of the modified component is marked as COMPONENT_KEPT_ALIVE because of the presence of the cache, causing the component not to be mounted:

core/packages/runtime-core/src/renderer.ts

Lines 1154 to 1172 in aa70188

	if (n2.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
	;(parentComponent!.ctx as KeepAliveContext).activate(
	n2,
	container,
	anchor,
	isSVG,
	optimized
	)
	} else {
	mountComponent(
	n2,
	container,
	anchor,
	parentComponent,
	parentSuspense,
	isSVG,
	optimized
	)
	}

I am trying to fix this issue.

[zhangzhonghe]

Duplicate of #6222