Skip to content

keepAlive with Dynamic Components setup hmr error #7042

Closed
@yuntian001

Description

@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.

Activity

zhangzhonghe

zhangzhonghe commented on Nov 7, 2022

@zhangzhonghe
Member

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:

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

zhangzhonghe commented on Nov 8, 2022

@zhangzhonghe
Member

Duplicate of #6222

added a commit that references this issue on Nov 10, 2022
a54bff2
added a commit that references this issue on Feb 4, 2023
377cbc8
added a commit that references this issue on Apr 12, 2023
3650dad
locked and limited conversation to collaborators on Sep 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @LinusBorg@zhangzhonghe@yuntian001

      Issue actions

        keepAlive with Dynamic Components `setup` hmr error · Issue #7042 · vuejs/core