Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug: 路由KeepAlive导致热更新出现报错 #4944

Open
5 tasks done
imdap opened this issue Nov 25, 2024 · 5 comments
Open
5 tasks done

Bug: 路由KeepAlive导致热更新出现报错 #4944

imdap opened this issue Nov 25, 2024 · 5 comments
Labels
bug Something isn't working

Comments

@imdap
Copy link
Contributor

imdap commented Nov 25, 2024

Version

Vben Admin V5

Describe the bug?

image

默认keepAlive为false 不会出现该问题 所属路由keepAlive设置为true会出现问题

stack:

[Vue warn]: Unhandled error during execution of watcher callback 
  at <KeepAlive key=0 exclude= [] include= (3) ['VxeTableExample', 'VxeTableBasicExample', 'ModalExample'] > 
  at <BaseTransition mode="out-in" appear=true persisted=false  ... > 
  at <Transition name="fade-slide" appear="" mode="out-in" > 
  at <RouterView> 
  at <LayoutContent> 
  at <LayoutContent content-compact="wide" content-compact-width=1200 padding=0  ... > 
  at <VbenLayout sidebar-extra-visible=true onUpdate:sidebarExtraVisible=fn content-compact="wide"  ... > 
  at <BasicLayout onClearPreferencesAndLogout=fn<handleLogout> > 
  at <Basic onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <RouterView> 
  at <AApp> 
  at <Anonymous value= {hashed: true, components: {…}, theme: Theme, token: {…}} > 
  at <ALocaleProvider locale= {locale: 'zh-cn', Pagination: {…}, DatePicker: {…}, TimePicker: {…}, Calendar: {…}, …} ANT_MARK__="internalMark" > 
  at <LocaleReceiver children=fn<children> > 
  at <AConfigProvider locale= {locale: 'zh-cn', Pagination: {…}, DatePicker: {…}, TimePicker: {…}, Calendar: {…}, …} theme= {algorithm: Array(1), token: Proxy(Object)} > 
  at <App>
warn$1 @ chunk-62J4MGY5.js?v=9d748fab:1865
logError @ chunk-62J4MGY5.js?v=9d748fab:2076
handleError @ chunk-62J4MGY5.js?v=9d748fab:2068
callWithErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2014
callWithAsyncErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2019
baseWatchOptions.call @ chunk-62J4MGY5.js?v=9d748fab:8024
job @ chunk-62J4MGY5.js?v=9d748fab:1741
flushPostFlushCbs @ chunk-62J4MGY5.js?v=9d748fab:2197
flushJobs @ chunk-62J4MGY5.js?v=9d748fab:2239
Promise.then
queueFlush @ chunk-62J4MGY5.js?v=9d748fab:2134
queueJob @ chunk-62J4MGY5.js?v=9d748fab:2129
baseWatchOptions.scheduler @ chunk-62J4MGY5.js?v=9d748fab:8036
effect2.scheduler @ chunk-62J4MGY5.js?v=9d748fab:1758
trigger @ chunk-62J4MGY5.js?v=9d748fab:258
endBatch @ chunk-62J4MGY5.js?v=9d748fab:316
notify @ chunk-62J4MGY5.js?v=9d748fab:576
trigger @ chunk-62J4MGY5.js?v=9d748fab:550
set value @ chunk-62J4MGY5.js?v=9d748fab:1422
finalizeNavigation @ vue-router.js?v=9d748fab:2500
（匿名） @ vue-router.js?v=9d748fab:2410
Promise.then
pushWithRedirect @ vue-router.js?v=9d748fab:2378
push @ vue-router.js?v=9d748fab:2304
navigation @ use-navigation.ts:23
handleMenuSelect @ use-mixed-menu.ts:80
callWithErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2012
callWithAsyncErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2019
emit @ chunk-62J4MGY5.js?v=9d748fab:8215
（匿名） @ chunk-62J4MGY5.js?v=9d748fab:9924
handleMenuSelect @ menu.vue:21
callWithErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2012
callWithAsyncErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2019
emit @ chunk-62J4MGY5.js?v=9d748fab:8215
（匿名） @ chunk-62J4MGY5.js?v=9d748fab:9924
handleMenuItemClick @ menu.vue:254
handleClick @ menu-item.vue:66
cache.<computed>.cache.<computed> @ chunk-62J4MGY5.js?v=9d748fab:11909
callWithErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2012
callWithAsyncErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2019
invoker @ chunk-62J4MGY5.js?v=9d748fab:10951了解此警告AI
use-navigation.ts:23 [Vue Router warn]: uncaught error during route navigation:
warn @ vue-router.js?v=9d748fab:50
triggerError @ vue-router.js?v=9d748fab:2592
（匿名） @ vue-router.js?v=9d748fab:2619
Promise.catch
handleScroll @ vue-router.js?v=9d748fab:2619
finalizeNavigation @ vue-router.js?v=9d748fab:2501
（匿名） @ vue-router.js?v=9d748fab:2410
Promise.then
pushWithRedirect @ vue-router.js?v=9d748fab:2378
push @ vue-router.js?v=9d748fab:2304
navigation @ use-navigation.ts:23
handleMenuSelect @ use-mixed-menu.ts:80
callWithErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2012
callWithAsyncErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2019
emit @ chunk-62J4MGY5.js?v=9d748fab:8215
（匿名） @ chunk-62J4MGY5.js?v=9d748fab:9924
handleMenuSelect @ menu.vue:21
callWithErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2012
callWithAsyncErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2019
emit @ chunk-62J4MGY5.js?v=9d748fab:8215
（匿名） @ chunk-62J4MGY5.js?v=9d748fab:9924
handleMenuItemClick @ menu.vue:254
handleClick @ menu-item.vue:66
cache.<computed>.cache.<computed> @ chunk-62J4MGY5.js?v=9d748fab:11909
callWithErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2012
callWithAsyncErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2019
invoker @ chunk-62J4MGY5.js?v=9d748fab:10951了解此警告AI
use-navigation.ts:23 TypeError: Cannot read properties of null (reading 'nextSibling')
    at nextSibling (chunk-62J4MGY5.js?v=9d748fab:10282:31)
    at removeFragment (chunk-62J4MGY5.js?v=9d748fab:7752:14)
    at remove2 (chunk-62J4MGY5.js?v=9d748fab:7723:9)
    at unmount (chunk-62J4MGY5.js?v=9d748fab:7701:9)
    at Object.remove (chunk-62J4MGY5.js?v=9d748fab:2810:9)
    at unmount (chunk-62J4MGY5.js?v=9d748fab:7676:20)
    at unmountComponent (chunk-62J4MGY5.js?v=9d748fab:7771:7)
    at unmount (chunk-62J4MGY5.js?v=9d748fab:7666:7)
    at unmountComponent (chunk-62J4MGY5.js?v=9d748fab:7771:7)
    at unmount (chunk-62J4MGY5.js?v=9d748fab:7666:7)
triggerError @ vue-router.js?v=9d748fab:2594
（匿名） @ vue-router.js?v=9d748fab:2619
Promise.catch
handleScroll @ vue-router.js?v=9d748fab:2619
finalizeNavigation @ vue-router.js?v=9d748fab:2501
（匿名） @ vue-router.js?v=9d748fab:2410
Promise.then
pushWithRedirect @ vue-router.js?v=9d748fab:2378
push @ vue-router.js?v=9d748fab:2304
navigation @ use-navigation.ts:23
handleMenuSelect @ use-mixed-menu.ts:80
callWithErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2012
callWithAsyncErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2019
emit @ chunk-62J4MGY5.js?v=9d748fab:8215
（匿名） @ chunk-62J4MGY5.js?v=9d748fab:9924
handleMenuSelect @ menu.vue:21
callWithErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2012
callWithAsyncErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2019
emit @ chunk-62J4MGY5.js?v=9d748fab:8215
（匿名） @ chunk-62J4MGY5.js?v=9d748fab:9924
handleMenuItemClick @ menu.vue:254
handleClick @ menu-item.vue:66
cache.<computed>.cache.<computed> @ chunk-62J4MGY5.js?v=9d748fab:11909
callWithErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2012
callWithAsyncErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2019
invoker @ chunk-62J4MGY5.js?v=9d748fab:10951了解此错误AI
3chunk-62J4MGY5.js?v=9d748fab:10282 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'nextSibling')
    at nextSibling (chunk-62J4MGY5.js?v=9d748fab:10282:31)
    at removeFragment (chunk-62J4MGY5.js?v=9d748fab:7752:14)
    at remove2 (chunk-62J4MGY5.js?v=9d748fab:7723:9)
    at unmount (chunk-62J4MGY5.js?v=9d748fab:7701:9)
    at Object.remove (chunk-62J4MGY5.js?v=9d748fab:2810:9)
    at unmount (chunk-62J4MGY5.js?v=9d748fab:7676:20)
    at unmountComponent (chunk-62J4MGY5.js?v=9d748fab:7771:7)
    at unmount (chunk-62J4MGY5.js?v=9d748fab:7666:7)
    at unmountComponent (chunk-62J4MGY5.js?v=9d748fab:7771:7)
    at unmount (chunk-62J4MGY5.js?v=9d748fab:7666:7)
nextSibling @ chunk-62J4MGY5.js?v=9d748fab:10282
removeFragment @ chunk-62J4MGY5.js?v=9d748fab:7752
remove2 @ chunk-62J4MGY5.js?v=9d748fab:7723
unmount @ chunk-62J4MGY5.js?v=9d748fab:7701
remove @ chunk-62J4MGY5.js?v=9d748fab:2810
unmount @ chunk-62J4MGY5.js?v=9d748fab:7676
unmountComponent @ chunk-62J4MGY5.js?v=9d748fab:7771
unmount @ chunk-62J4MGY5.js?v=9d748fab:7666
unmountComponent @ chunk-62J4MGY5.js?v=9d748fab:7771
unmount @ chunk-62J4MGY5.js?v=9d748fab:7666
unmountComponent @ chunk-62J4MGY5.js?v=9d748fab:7771
unmount @ chunk-62J4MGY5.js?v=9d748fab:7666
unmountChildren @ chunk-62J4MGY5.js?v=9d748fab:7791
unmount @ chunk-62J4MGY5.js?v=9d748fab:7698
unmountChildren @ chunk-62J4MGY5.js?v=9d748fab:7791
unmount @ chunk-62J4MGY5.js?v=9d748fab:7698
unmountComponent @ chunk-62J4MGY5.js?v=9d748fab:7771
unmount @ chunk-62J4MGY5.js?v=9d748fab:7666
unmountComponent @ chunk-62J4MGY5.js?v=9d748fab:7771
unmount @ chunk-62J4MGY5.js?v=9d748fab:7666
unmountComponent @ chunk-62J4MGY5.js?v=9d748fab:7771
unmount @ chunk-62J4MGY5.js?v=9d748fab:7666
unmountComponent @ chunk-62J4MGY5.js?v=9d748fab:7771
unmount @ chunk-62J4MGY5.js?v=9d748fab:7666
unmountComponent @ chunk-62J4MGY5.js?v=9d748fab:7771
unmount @ chunk-62J4MGY5.js?v=9d748fab:7666
unmountComponent @ chunk-62J4MGY5.js?v=9d748fab:7771
unmount @ chunk-62J4MGY5.js?v=9d748fab:7666
unmountChildren @ chunk-62J4MGY5.js?v=9d748fab:7791
unmount @ chunk-62J4MGY5.js?v=9d748fab:7690
unmountChildren @ chunk-62J4MGY5.js?v=9d748fab:7791
unmount @ chunk-62J4MGY5.js?v=9d748fab:7690
unmountComponent @ chunk-62J4MGY5.js?v=9d748fab:7771
unmount @ chunk-62J4MGY5.js?v=9d748fab:7666
unmountComponent @ chunk-62J4MGY5.js?v=9d748fab:7771
unmount @ chunk-62J4MGY5.js?v=9d748fab:7666
unmount @ chunk-62J4MGY5.js?v=9d748fab:4447
pruneCacheEntry @ chunk-62J4MGY5.js?v=9d748fab:4460
（匿名） @ chunk-62J4MGY5.js?v=9d748fab:4453
pruneCache @ chunk-62J4MGY5.js?v=9d748fab:4450
watch2.flush @ chunk-62J4MGY5.js?v=9d748fab:4470
callWithErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2012
callWithAsyncErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2019
baseWatchOptions.call @ chunk-62J4MGY5.js?v=9d748fab:8024
job @ chunk-62J4MGY5.js?v=9d748fab:1741
flushPostFlushCbs @ chunk-62J4MGY5.js?v=9d748fab:2197
flushJobs @ chunk-62J4MGY5.js?v=9d748fab:2239
Promise.then
queueFlush @ chunk-62J4MGY5.js?v=9d748fab:2134
queueJob @ chunk-62J4MGY5.js?v=9d748fab:2129
baseWatchOptions.scheduler @ chunk-62J4MGY5.js?v=9d748fab:8036
effect2.scheduler @ chunk-62J4MGY5.js?v=9d748fab:1758
trigger @ chunk-62J4MGY5.js?v=9d748fab:258
endBatch @ chunk-62J4MGY5.js?v=9d748fab:316
notify @ chunk-62J4MGY5.js?v=9d748fab:576
trigger @ chunk-62J4MGY5.js?v=9d748fab:550
set value @ chunk-62J4MGY5.js?v=9d748fab:1422
finalizeNavigation @ vue-router.js?v=9d748fab:2500
（匿名） @ vue-router.js?v=9d748fab:2410
Promise.then
pushWithRedirect @ vue-router.js?v=9d748fab:2378
push @ vue-router.js?v=9d748fab:2304
navigation @ use-navigation.ts:23
handleMenuSelect @ use-mixed-menu.ts:80
callWithErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2012
callWithAsyncErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2019
emit @ chunk-62J4MGY5.js?v=9d748fab:8215
（匿名） @ chunk-62J4MGY5.js?v=9d748fab:9924
handleMenuSelect @ menu.vue:21
callWithErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2012
callWithAsyncErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2019
emit @ chunk-62J4MGY5.js?v=9d748fab:8215
（匿名） @ chunk-62J4MGY5.js?v=9d748fab:9924
handleMenuItemClick @ menu.vue:254
handleClick @ menu-item.vue:66
cache.<computed>.cache.<computed> @ chunk-62J4MGY5.js?v=9d748fab:11909
callWithErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2012
callWithAsyncErrorHandling @ chunk-62J4MGY5.js?v=9d748fab:2019
invoker @ chunk-62J4MGY5.js?v=9d748fab:10951了解此错误AI

Reproduction

复现步骤:

  1. (随便一个路由) playground\src\router\routes\modules\examples.ts 加上keepAlive: true
    image
  2. 修改对应的vue文件(随便加代码) & 保存
    image
    image
  3. 切换其他菜单 可复现问题
    image

System Info

Binaries:
    Node: 20.15.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.12.2 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

Relevant log output

No response

Validations
@vince292007
Copy link
Collaborator

这个看起来是vue的问题

@mynetfan
Copy link
Collaborator

当前版本没能重现

@imdap
Copy link
Contributor Author

imdap commented Nov 27, 2024

测试如下菜单 这几个在开启keepalive & 热更新会复现问题
image

@imdap
Copy link
Contributor Author

imdap commented Nov 27, 2024

表格相关菜单测试这几个热更新异常 其他正常
image

@mynetfan mynetfan added bug Something isn't working and removed bug: pending triage labels Nov 27, 2024
@wangz-code
Copy link

wangz-code commented Dec 2, 2024 •
edited
Loading

我上次貌似遇到这个问题是因为在 开启 keepalive 的页面 在template内又使用了template 比如

<template>
  <h1>标题</h1>
  <template v-if="xxxx">这里直接写就会有问题</template>
  <template v-if="xxxx">
    <div>用div 包裹一下就正常了</div>
  </template>
</template>
这玩意只回在热更新后报错, 刷新是则一切正常的

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@wangz-code @mynetfan @imdap @vince292007