TypeError: parentComponent.ctx.deactivate is not a function

[danyadev]

Version

3.0.0-rc.5

Reproduction link

https://github.com/danyadev/vue3-bug/tree/bug-2

Steps to reproduce

1. clone repo
   1.1 git checkout bug-2
   1.2. yarn
   1.3. yarn dev
2. double click on the button
3. check your DevTools

What is expected?

no errors

What is actually happening?

Uncaught (in promise) TypeError: parentComponent.ctx.deactivate is not a function
    at unmount (runtime-core.esm-bundler.js?5c40:4540)
    at patch (runtime-core.esm-bundler.js?5c40:3616)
    at Object.sharedContext.activate (runtime-core.esm-bundler.js?5c40:2575)
    at processComponent (runtime-core.esm-bundler.js?5c40:3994)
    at patch (runtime-core.esm-bundler.js?5c40:3647)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4182)
    at Object.reactiveEffect [as update] (reactivity.esm-bundler.js?a1e9:42)
    at updateComponent (runtime-core.esm-bundler.js?5c40:4071)
    at processComponent (runtime-core.esm-bundler.js?5c40:4001)
    at patch (runtime-core.esm-bundler.js?5c40:3647)

---

• in rc.1 there are no errors and nothing breaks
• in rc.2, rc.3 and rc.4 this error appears in the console
• in rc.5, along with this error, the application completely stops responding to any actions

in tests, the version of vue-router was always 4.0.0-beta.6

[posva]

It doesn't show any error after upgrading vue dependencies to the latest ones. On your repro I removed the yarn.lock file and ran yarn and everything works

[danyadev]

I just removed node_modules and yarn.lock, typed in yarn and started the application again - the error is reproducible as well.

Also on my main project, I updated all dependencies in the same way and the problem did not get resolved.

[danyadev]

Did you switch from branch master to bug-2 exactly? The master branch also has a button, so you could confuse them.

[danyadev]

I deleted all yarn cache, node_modules and yarn.lock and tried to install dependencies absolutely from scratch - it doesn't matter, the error is still reproducible.

[posva]

I see it in the branch. The problem is you are using the same key for two different components because you are not filtering what you are keeping alive. So you have either provide a unique key based on the route path/name + the id, that way KeepAlive will be able to restore the correct component, or use

      <KeepAlive include="MessagesChat">
        <component :is="Component" :key="id" />
      </KeepAlive>

and give MessagesChat.vue a name property to only keep alive that one but still use a simple id.

BTW, you should not use NaN as a key because NaN != NaN so it never matches the old one

[danyadev]

Oh, but I already had problems with the key for KeepAlive, and I met with them again.

Thanks, I used route.name + id for the key

[ydsuper]

THANK YOU VERY MUCH !!!

[FrankMbappe]

I see it in the branch. The problem is you are using the same key for two different components because you are not filtering what you are keeping alive. So you have either provide a unique key based on the route path/name + the id, that way KeepAlive will be able to restore the correct component, or use

      <KeepAlive include="MessagesChat">
        <component :is="Component" :key="id" />
      </KeepAlive>

and give MessagesChat.vue a name property to only keep alive that one but still use a simple id.

BTW, you should not use NaN as a key because NaN != NaN so it never matches the old one

THANKS

[DoniyorbekErkinov]

why google is stupid