Question

因此，在我的Nuxt 通用模式应用中，有时会出现一个错误：

vue.runtime.esm.js:620 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

通常会出现第二个（实际上第二个有时会上升而没有第一个，而不是相反）：

TypeError: Cannot read property 'toLowerCase' of undefined
    at emptyNodeAt (vue.runtime.esm.js:5851)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js:6492)
    at VueComponent.Vue._update (vue.runtime.esm.js:3933)
    at VueComponent.updateComponent (vue.runtime.esm.js:4048)
    at Watcher.get (vue.runtime.esm.js:4467)
    at new Watcher (vue.runtime.esm.js:4456)
    at mountComponent (vue.runtime.esm.js:4061)
    at VueComponent.Vue.$mount (vue.runtime.esm.js:8399)
    at init (vue.runtime.esm.js:3115)
    at hydrate (vue.runtime.esm.js:6362)

然后什么都没有用，因为当我单击应用程序中的另一个页面时，我得到：

client.js:134 TypeError: Cannot read property '_transitionClasses' of undefined
    at Array.updateClass (vue.runtime.esm.js:6799)
    at patchVnode (vue.runtime.esm.js:6298)
    at updateChildren (vue.runtime.esm.js:6177)
    at patchVnode (vue.runtime.esm.js:6303)
    at updateChildren (vue.runtime.esm.js:6177)
    at patchVnode (vue.runtime.esm.js:6303)
    at updateChildren (vue.runtime.esm.js:6177)
    at patchVnode (vue.runtime.esm.js:6303)
    at updateChildren (vue.runtime.esm.js:6177)
    at patchVnode (vue.runtime.esm.js:6303)

我大部分都理解为什么发生这种情况，尽管出现这种情况时，我不知道从哪里开始，因为错误消息并没有提示实际上是什么服务器端版本和客户端版本之间的区别。

因此，当此问题出现时，我唯一能做的就是回滚到以前的git commit，直到问题解决为止……不幸的是，这种方法无法很好地工作，因为有时该错误会出现在原来的代码版本中以前没有。

通常，解决方案是删除尽可能多的内容（.nuxt，node_install）并从头开始设置所有内容，并希望它可以再次工作。

最后我的评论/问题是：

出现client-side version doesn't match the server-side错误时，为什么我们不能获得有关有何不同的详细信息？
您知道为什么此错误会以这种不确定的方式整体发生吗？
为什么这会破坏一切，而起初这只是一个警告？

对于我来说，这对于生产应用程序来说是一个很大的问题，因为它具有不可确定的可修复性。

Answer 1

显然，在我的情况下，platform错误在报告错误时正在上升。

我碰巧在另一种情况下收到了getSessionId()警告，我确实收到了有用的解释，并且它没有阻止执行，因此我将认为Bug上的错误是运气不好，最终会自然而然地得到解决。，除非将来会复制。

如果您碰巧遇到相同的错误，请不要绝望。

首先，向nuxt存储库报告TypeError: Cannot read property 'toLowerCase' of undefined错误。

然后，为了进行调试，建议您对模板的某些部分进行注释，以查找如何消除错误。就我而言，它是在布局中，因此它一直一直发生，但是一旦我明白了，我很快就找到了解释（尽管这是The client-side rendered virtual DOM tree is not matching server-rendered content的一种神秘的不同行为在节点环境和浏览器之间。

祝你好运！

Nuxt如何调试：客户端渲染的虚拟DOM树与服务器渲染的内容不匹配

1 个答案: