热更新报错 TypeError: parentComponent.ctx.deactivate is not a function

[Aisanyi]

Vue version

3.2.25

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-xqwn2n?file=src/components/HelloWorld.vue

Steps to reproduce

当修改usePage函数的参数

What is expected?

页面发生修改

What is actually happening?

parentComponent.ctx.deactivate is not a function

System Info

No response

Any additional comments?

No response

[lisonge]

vue@3.2.37 ， vue-router@4.0.16, vite@2.9.13 , @vitejs/plugin-vue@2.3.3
当 router-view 把 keep-alive 包裹的时候，无论 component key 是什么，热更新 router-view 下的根组件 都会报错 ，子组件不会

TypeError: parentComponent.ctx.deactivate is not a function

[chenhaihong]

vue@3.2.37 ， vue-router@4.0.16, vite@2.9.13 , @vitejs/plugin-vue@2.3.3 当 router-view 被 keep-alive 包裹的时候，无论 key 是什么，热更新 router-view 下的根组件 都会报错 ，子组件不会

TypeError: parentComponent.ctx.deactivate is not a function

盲猜你是把 component 套了自定义组件里了，导致找不到 keepalive 实例，所以 deactivate 函数找不到。

[lisonge]

@chenhaihong

我之前的描述反了，应该是当 router-view 把 keep-alive 包裹

我用 keep-alive 是为了 移动端路由 在回退时 恢复状态

App.vue

<script setup>
</script>
<template>
        <router-view v-slot="{ Component }">
            <!-- TODO keep-alive 路由回退需要清除缓存  -->
            <keep-alive>
                <component
                    :is="Component"
                    :key="$route.fullPath"
                />
            </keep-alive>
        </router-view>
</template>
<style lang="scss" scoped></style>

router.ts

router.beforeEach((to, from, next) => {
    if (!to.query.t) {
        to.query.t = new Date().getTime().toString();
        return next(to);
    }
    next();
});

[feiyayshx]

same error

[paul-xia]

saaaaaaaaaaaaaaaaaaaame error

[like0413]

same error

[sunset-L]

same error

[wy-service]

我也是同样的问题，ctrl+s保存就报错，

[boundless-qi]

same error！

[JackDeng666]

same

[qinpeip]

same error!!!

[olddriverads]

相同的

请问有解决方法吗

[olddriverads]

同样的错误！！！

请问有解决方案吗

[ZSSXL]

same error

[leyue]

升级chrome到最新版本可以解决，但还是有些场合无法升级浏览器版本。

[poerlang]

同样的报错，chrome 版本是 100

[Shadows-kk]

一个笨拙的解决办法，将报错的.vue文件当成一个组件，然后新建一个index.vue引入这个组件。

[midfar]

chrome 105.0.5195.102 依然存在该问题

[like0413]

chrome 105.0.5195.102 依然存在该问题

关浏览器什么事

[midfar]

chrome 105.0.5195.102 依然存在该问题

关浏览器什么事

我也觉得和浏览器无关，试了好几个vue旧版本，有的版本即使控制台不报错，KeepAlive的页面，多次切换或热更新显示也有异常

[poerlang]

换了最新的 chrome 浏览器，也一样报错

[Eunknight]

Temporary Solutions 临时解决方案

<template v-if="NODE_ENV !== 'development'">
 <keep-alive>
    <component :is="Component" :key="route.fullPath" />
  </keep-alive>
</template>
<template v-else>
    <component :is="Component" :key="route.fullPath" />
</template>

vue-cli

const NODE_ENV = process.env.NODE_ENV

vite
https://cn.vitejs.dev/guide/env-and-mode.html

<template v-if="!DEV">

const DEV = import.meta.env.DEV;

[Eunknight]

页面1是集成了echarts图表的KeepAlive页面，页面2是普通的vue KeepAlive页面，页面1切换到页面2后，会发现走了页面1的beforeUnmount \ unmounted 生命周期；再切回1，echarts图表都不显示出来，显示的是白色占位块（因为页面1已经销毁了）。

你这个不一定是vue的问题，可能是echarts的问题。你这个问题，不附代码，没法定位。

[midfar]

页面1是集成了echarts图表的KeepAlive页面，页面2是普通的vue KeepAlive页面，页面1切换到页面2后，会发现走了页面1的beforeUnmount \ unmounted 生命周期；再切回1，echarts图表都不显示出来，显示的是白色占位块（因为页面1已经销毁了）。

你这个不一定是vue的问题，可能是echarts的问题。你这个问题，不附代码，没法定位。

这个是有问题的代码工程：
打包后，登录后的echarts图表页和其他KeepAlive页面切换，再切回来，就能看到问题了。如果两个KeepAlive的页面没问题，就3个KeepAlive的页面切，一定会出问题
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-fba5454d-3a27-4ea5-babf-ea74eb4644f5/649066cc-3178-4393-8064-b59df4403c29.zip

[Eunknight]

这个是有问题的代码工程： 打包后，登录后的echarts图表页和其他KeepAlive页面切换，再切回来，就能看到问题了。如果两个KeepAlive的页面没问题，就3个KeepAlive的页面切，一定会出问题 https://vkceyugu.cdn.bspapp.com/VKCEYUGU-fba5454d-3a27-4ea5-babf-ea74eb4644f5/649066cc-3178-4393-8064-b59df4403c29.zip

今天没时间看，后面有时间我看一下吧，看了可能也解决不了问题。

[chenhaihong]

@midfar 看下这个能不能用 #4339 (comment)

自己给 keep-alive 包裹的 component 包个壳。
我原本在做做多tab单页应用的时候，也遇到这个问题，加了这个壳后，在开发和生产模式下都没有再出现过这个问题。

[midfar]

@midfar 看下这个能不能用 #4339 (comment)

自己给 keep-alive 包裹的 component 包个壳。 我原本在做做多tab单页应用的时候，也遇到这个问题，加了这个壳后，在开发和生产模式下都没有再出现过这个问题。

你这样改貌似可以，但是控制台有另一个警告（好像不影响功能）
[Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with markRaw or using shallowRef instead of ref.

[chenhaihong]

@midfar 贴下你的代码看下。

[midfar]

@midfar 贴下你的代码看下。

已上传到这里，注意是keep-alive分支。开发模式下，登录后可以看到控制台警告
https://github.com/midfar/vue3-element-admin/tree/keep-alive

[chenhaihong]

@midfar 你别把壳组件集合放到响应式数据里，这里改一改。

https://github.com/midfar/vue3-element-admin/blob/7217ef5a567915789a0f3e6b8ad8bde76990bb14/src/layout/components/AppMain.vue#L21

你在你的 tagsView 模块里就把 wrapperMap 写成一个普通的变量好了，然后 export 出去。
在 AppMain 组件导入 wrapperMap 吧。

[midfar]

@midfar 你别把壳组件集合放到响应式数据里，这里改一改。

https://github.com/midfar/vue3-element-admin/blob/7217ef5a567915789a0f3e6b8ad8bde76990bb14/src/layout/components/AppMain.vue#L21

你在你的 tagsView 模块里就把 wrapperMap 写成一个普通的变量好了，然后 export 出去。 在 AppMain 组件导入 wrapperMap 吧。

恩，可以了，牛逼啊

[poerlang]

加壳的操作，有点复杂，而且意义也不明确，最好官方能支持，不用我们加这么多代码

[varzy]

same error

[midfar]

same error

楼上大佬已经解决了呢

[xinsites]

@midfar 看下这个能不能用 #4339 (comment)
自己给 keep-alive 包裹的 component 包个壳。 我原本在做做多tab单页应用的时候，也遇到这个问题，加了这个壳后，在开发和生产模式下都没有再出现过这个问题。

你这样改貌似可以，但是控制台有另一个警告（好像不影响功能） [Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with markRaw or using shallowRef instead of ref.

加markRaw就没警告了，return h(markRaw(wrapper));

[Geniusning]

官方还没有解决方案么

[caiqichang]

+1

[paul-xia]

vue@3.2.41，same error:

[try2020-code]

same error

[xjtarzan]

Uncaught (in promise) TypeError: parentComponent.ctx.deactivate is not a function
我也是一样的问题，热更新就报错

[Niefee]

same error

[linfulongnet]

https://pullanswer.com/questions/runtime-core-esm-bundler-js-7318-uncaught-in-promise-typeerror-parentcomponent-ctx-deactivate-is-not-a-function

[yiaokan]

如果你使用vue3.2x的版本还有相同的问题，使用的是官网推荐的router-view > keep-alive > suspense > component ，那你可以尝试下下面这个模板，个人通过几台电脑测试了一下是可以跑得通的。