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 serve
In my case I had to change this:
<v-expansion-panel-header v-text="name" />
to this:
<v-expansion-panel-header>{{ name }}</v-expansion-panel-header>
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)
msg
variable. hydrate
function call 4 lines above the execution line in patch
. Hyperlink to the source of hydrate
would open. hydrate
function, move about 15 lines from the start and set a breakpoint where false
is returned after assertNodeMatch
returned false
. Set the breakpoint there and remove all other breakpoints. hydrate
function. Switch to DevTools console and evaluate elm
and then 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.What I have found so far from observation is that when you are using third party packages like jQuery (specially), they sometimes inject html tags into the dom. So Vue/Nuxt looses track of the dom tree and starts complaining.
I was having the same problem and after a while I removed all jQuery and replaced jQuery functionality with Vuejs and those error were all gone.
Check the previous warning:
In "nuxt": "^2.12.2"
, You can spot the cause easily from the previous warning.
In my case:
Incorrect
<nuxt-link to="/game42day">
<a>Game For Today</a>
</nuxt-link>
Correct:
<nuxt-link to="/game42day">
Game For Today
</nuxt-link>
I had the same issue as of nuxt version 2.14.0 while implementing vue-particles package . the fix was surrounding the tags no-ssr and it fixed the issue . example :
<no-ssr>
<vue-particles>
</vue-particles>
</no-ssr>
See here for an example of how to deal with integrations (e.g. Google Analytics or FB Pixel) that modify the DOM. Basically create a plugin and exclude from SSR.
https://nuxtjs.org/faq/ga