【发布时间】：2022-08-06 01:04:21
【问题描述】：
我目前在 nuxt 中有一个应用程序，在某些情况下，当我加载页面时，我在控制台中收到此错误并且页面只是简单地死掉了，它停止加载所有其他组件
Cannot read properties of undefined (reading \'resolved\')
这是错误的调用堆栈
_callee$ @ 4995173.js:7609
tryCatch @ 1a976f9.js:10241
invoke @ 1a976f9.js:10471
(anonymous) @ 1a976f9.js:10296
asyncGeneratorStep @ bd976e3.js:135
_next @ bd976e3.js:157
(anonymous) @ bd976e3.js:164
(anonymous) @ bd976e3.js:153
(anonymous) @ 4995173.js:7621
globalHandleError @ 1a976f9.js:1724
handleError @ 1a976f9.js:1693
(anonymous) @ 1a976f9.js:1834
flushCallbacks @ 1a976f9.js:1758
Promise.then (async)
timerFunc @ 1a976f9.js:1785
nextTick @ 1a976f9.js:1842
Vue.$nextTick @ 1a976f9.js:3198
mounted @ 3d9c3ba.js:2783
invokeWithErrorHandling @ 1a976f9.js:1708
callHook @ 1a976f9.js:3832
insert @ 1a976f9.js:2843
invokeInsertHook @ 1a976f9.js:5806
patch @ 1a976f9.js:5937
Vue._update @ 1a976f9.js:3595
updateComponent @ 1a976f9.js:3683
get @ 1a976f9.js:4069
Watcher @ 1a976f9.js:4058
mountComponent @ 1a976f9.js:3690
push.Vue.$mount @ 1a976f9.js:7826
mount @ 4995173.js:8426
_callee6$ @ 4995173.js:8474
tryCatch @ 1a976f9.js:10241
invoke @ 1a976f9.js:10471
(anonymous) @ 1a976f9.js:10296
asyncGeneratorStep @ bd976e3.js:135
_next @ bd976e3.js:157
Promise.then (async)
asyncGeneratorStep @ bd976e3.js:145
_next @ bd976e3.js:157
Promise.then (async)
asyncGeneratorStep @ bd976e3.js:145
_next @ bd976e3.js:157
(anonymous) @ bd976e3.js:164
(anonymous) @ bd976e3.js:153
_mountApp @ 4995173.js:8521
mountApp @ 4995173.js:8399
Promise.then (async)
(anonymous) @ 4995173.js:7631
661 @ 4995173.js:8523
__webpack_require__ @ 01d6f59.js:85
660 @ 4995173.js:7384
__webpack_require__ @ 01d6f59.js:85
checkDeferredModules @ 01d6f59.js:46
webpackJsonpCallback @ 01d6f59.js:33
(anonymous) @ 4995173.js:1
引发错误的代码在函数patchVnode 中的vue 内部，更具体地说，这里的条件是：
if (isTrue(oldVnode.isAsyncPlaceholder)) {
if (isDef(vnode.asyncFactory.resolved)) {
hydrate(oldVnode.elm, vnode, insertedVnodeQueue);
} else {
vnode.isAsyncPlaceholder = true;
}
return
}
这是它的调用堆栈
TypeError: Cannot read properties of undefined (reading \'resolved\')
at patchVnode (1a976f9.js:5746)
at updateChildren (1a976f9.js:5655)
at patchVnode (1a976f9.js:5781)
at updateChildren (1a976f9.js:5655)
at patchVnode (1a976f9.js:5781)
at updateChildren (1a976f9.js:5655)
at patchVnode (1a976f9.js:5781)
at updateChildren (1a976f9.js:5655)
at patchVnode (1a976f9.js:5781)
at VueComponent.patch [as __patch__]
由于某种原因，vNode 在true 中有属性isAsyncPlaceholder ，但asyncFactory 不存在，处于未定义状态，当它尝试访问属性resolved 时抛出错误。对于我可以在代码中研究的内容，似乎当我更新属性值并且某些计算属性使用该值时会发生此错误。父组件代码是这样的：
data() {
return {
loadingResults: false
};
},
computed() {
showLoading() {
return this.loadingResults && this.someOtherCondition && this.someOtherCondition;
}
}
mounted() {
this.search();
},
methods: {
search() {
this.loadingResults = true;
}
}
如果我在计算属性中评论this.loadingResults = true; 或loadingResults 部分，则错误不再出现并且页面完全加载（这就是为什么我说更改此值会导致错误）但那是不是一个合适的解决方案。另一种解决方案是将引发错误的组件包装到 <client-only> 标签中，但这会增加我的 LCP，我不想用标签修复它。现在我真的迷失了如何解决这个问题，任何帮助将不胜感激
标签： typescript vue.js nuxt.js server-side-rendering