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

Question

所以在我的 Nuxt universal-mode 应用程序中，我有时会出现错误：

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 提交，直到问题自行解决......不幸的是，这并不是很好，因为有时会出现错误在以前没有的代码版本上。

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

最后我的 remarks/questions 是：

当 client-side version doesn't match the server-side 错误出现时，为什么我们不能有更详细的信息有什么区别？
知道为什么这个错误作为一个整体以这种不确定的方式发生吗？
为什么这会破坏一切，而一开始这只是一个警告？

对我来说，这对于生产应用程序来说是一个非常大的问题，因为它无法确定地修复。

Answer 1

显然在我的情况下，TypeError: Cannot read property 'toLowerCase' of undefined 错误在错误报告时间上升。

我碰巧在另一个上下文中收到了 The client-side rendered virtual DOM tree is not matching server-rendered content 警告，我确实收到了有用的解释并且它没有阻止执行所以我认为 bug-over-the-bug 是运气不好，最终会得到自然固定，除非它在未来重现。

如果你碰巧遇到同样的错误，不要绝望。

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

然后，为了进行调试，我鼓励您对模板的某些部分进行评论，以了解如何消除错误。在我的例子中，它在布局中，因此它一直发生，但是一旦我理解了这一点，我很快就找到了解释（尽管这是 date-fns在节点环境和浏览器之间）。

祝你好运！

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

Nuxt how to debug: The client-side rendered virtual DOM tree is not matching server-rendered content

server-side-rendering

nuxt.js