The question is published on by Tutorial Guruji team.
I am using Nuxt.js / Vuejs for mmy app, and I keep facing 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 understand what is the best way to debug this error? Is their a way I can record/get the virtual DOM tree for client and server so I could compare and find where the error lies?
Mine is a large application and manually verifying is difficult.
Partial answer: with Chrome DevTools, you can localize the issue and see exactly what element caused the issue. Do the following (I did that with Nuxt 5.6.0 and Chrome 64.0.3282.186)
- Show DevTools in Chrome (F12)
- Load the page that causes “the client-side rendered virtual DOM tree…” warning.
- Scroll to the warning in DevTools console.
- Click at the source location hyperlink of the warning (in my case it was vue.runtime.esm.js:574).
- Set a breakpoint there (left-clicking at line number in the source code browser).
- Make the same warning to appear again. I’m not saying it is always possible, but in my case I simply reloaded the page. If there are many warnings, you can check the message by moving a mouse over
- When you found your message and stopped on a breakpoint, look at the call stack. Click one frame down to call to “patch” to open its source. Hover mouse over
hydratefunction call 4 lines above the execution line in
patch. Hyperlink to the source of
- In the
hydratefunction, move about 15 lines from the start and set a breakpoint where
falseis returned after
false. Set the breakpoint there and remove all other breakpoints.
- Make the same warning to happen again. Now, when breakpoint is hit, execution should stop in the
hydratefunction. Switch to DevTools console and evaluate
vnode. Here elm seem to be a server-rendered DOM element while vnode is a virtual DOM node. Elm is printed as HTML so you can figure out where the error happened.