Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered
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
msg
variable. - 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
hydrate
function call 4 lines above the execution line inpatch
. Hyperlink to the source ofhydrate
would open. - In the
hydrate
function, move about 15 lines from the start and set a breakpoint wherefalse
is returned afterassertNodeMatch
returnedfalse
. 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
hydrate
function. Switch to DevTools console and evaluateelm
and thenvnode
. 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.
For me this error happened cuz get Array list in AsyncData
and rendered <tr>
tags by v-for
, i put v-for
codes in <client-only>
blocks and problem solved
I had the same issue as of nuxt version 2.14.0
while implementing vue-particles package. The fix was to surround the tags with no-ssr
and it fixed the issue.
EDIT:
Updated variant of the solution (if Nuxt version is above 2.9.0
)
<client-only> <vue-particles> </vue-particles></client-only>
Old solution:
<no-ssr> <vue-particles> </vue-particles></no-ssr>