Subscribe on changes!

keepAlive with Dynamic Components `setup` hmr error

avatar
Nov 7th 2022

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.

avatar
Nov 7th 2022

https://github.com/vuejs/core/blob/0841b9b5243acdaf191099b25e9a145b30189dea/packages/runtime-core/src/components/KeepAlive.ts#L306-L315

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:

https://github.com/vuejs/core/blob/aa70188c41fab1a4139748dd7b7c71532d063f3a/packages/runtime-core/src/renderer.ts#L1154-L1172

I am trying to fix this issue.

avatar
Nov 8th 2022

Duplicate of #6222