Vuejs error: Client-rendered virtual DOM tree does not match server-rendered

Question

I'm using Nuxt.js/Vuejs in my app and I keep getting this error in different places:

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.

I would like to know what is the best way to debug this error? Is this a way I can log/get the virtual DOM trees of client and server so I can compare and find where the error is?

My application is large and manual verification is difficult.

Answer 1

For me, this error happened because while getting the array list in AsyncData and rendering the tag via v-for, I put >v-for code in block and resolve issue

Answer 2

Partial answer: Using Chrome DevTools, you can locate the problem and see exactly which element is causing it. Do the following (I'm doing this using Nuxt 5.6.0 and Chrome 64.0.3282.186)

1. Show developer tools in Chrome (F12)
2. Loading the page that caused the "Client-side rendered virtual DOM tree..." warning.
3. Scroll to the warning in the DevTools console.
4. Click the warning's source location hyperlink (in my case vue.runtime.esm.js:574).
5. Set a breakpoint there (left-click at the line number in the source code browser).
6. Make the same warning appear again. I'm not saying this is always possible, but in my case I just reloaded the page. If there are many warnings, you can view the messages by moving your mouse over the msg variable.
7. When you find the message and stop at the breakpoint, look at the call stack. Click on the next frame call "patch" to open its source code. Hover over the Hydro function call 4 lines above the execution line in patch. A hyperlink to the source of Hydrate will open.
8. In the enchanted function, move about 15 lines from the beginning and set a breakpoint that returns false false# after assertNodeMatch returns ##. Set a breakpoint there and delete all other breakpoints.
The same warning is issued again. Now, when a breakpoint is hit, execution should stop in the
9. enchanted function. Switch to the DevTools console and evaluate elm, then vnode. Here elm appears to be a server-rendered DOM element, and vnode is a virtual DOM node. Elm prints to HTML so you can figure out where the error occurs.