Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered
Javascriptvue.jsVuejs2nuxt.jsJavascript Problem Overview
I am using Nuxt.js / Vuejs for my 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.
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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
Solution 3 - Javascript
This error can be really painfull to debug. In order to quickly get the element causing an issue edit node_modules/vue/dist/vue.esm.js
and add the following lines :
// Search for this line:
function hydrate (elm, vnode, insertedVnodeQueue, inVPre) {
var i;
var tag = vnode.tag;
var data = vnode.data;
var children = vnode.children;
inVPre = inVPre || (data && data.pre);
vnode.elm = elm;
// Add the following lines:
console.log('elm', elm)
console.log('vnode', vnode)
console.log('inVpre', inVPre)
// ...
You will get in the console the failing node.
Solution 4 - Javascript
There are a lot of ways of fixing this issue, but most of them are not actual fixes, just hacky band-aids. To note a few:
- wrap it into
<client-only>
tags, beware of some important details tho - using a
v-show
instead of av-if
- trying to hack some lifecycles
- etc...
I highly recommend reading this gorgeous article written by Alexander Lichter
> https://blog.lichter.io/posts/vue-hydration-error/
He'll explain you that you should diagnose why this happens and fix the actual issue.
Basically each time something is different from what was generated on the server and what is available when done hydrating on the client will cause this error.
Some of which are:
- invalid HTML (having a block element inside of a
<p>
, same goes for ana
tag nested into another, etc...) - 3rd party scripts messing around with your components
- different state on server vs client
- any random is risky (
new Date()
for example) - any page related to authentication
I highly recommend reading the article to understand in Alexandre's own words how to handle this kind of issue. If you're in a hurry you could always use one band-aid fix but try to actually fix the issue for the best performance and to keep the code clean.
Solution 5 - Javascript
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>
Solution 6 - Javascript
For Nuxt version above 2.10 it doesn't need to install nothing, just use the default component <client-only>
as mentioned https://nuxtjs.org/api/components-client-only/.
Solution 7 - Javascript
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>
Solution 8 - Javascript
Turns out, in my case, I had HTML comment tags , which was causing this stupid, annoying error. Took me too long to figure it out but in case it helps someone.
Solution 9 - Javascript
If you're rendering a component conditionally with v-if
, then you have two options to solve the problem:
The first one is wrapping the element in <no-ssr></no-ssr>
tag.
The second approach is replacing v-if
with v-show
, here is the link to Vue docs.
Solution 10 - Javascript
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>
Solution 11 - Javascript
I also get many errors due to this problem. I list two cases I often encounter, hope can help you.
- With vuetify button, when you create a common component, you should use:
<v-btn>{{text}}</v-btn>
. Example:
<template>
<v-btn
:width="width"
:color="color"
:class="[rounded ? 'rounded-pill' : 'rounded-lg',textColor]"
v-on:click="onClick"
elevation="0"
:outlined="outlined"
:type="type"
:name="name"
:form="form"
:disabled="disabled"
v-bind="$attrs"
>{{ text }}</v-btn>
</template>
- Don't use v-html with
<p>
tag. Not use:<p v-html='html'></p>
. Use:<div v-html='html'></div>
.
Besides, if you use <client-only></client-only>
, this problem is definitely solved, but if you need to SEO page or show google ads, it is not good solution.
Solution 12 - Javascript
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.
Solution 13 - Javascript
Ok this is going to sound silly. I tried a bunch of different solutions for about 15 mins such as restarting the server and deleting the .nuxt directory but I was too lazy to use @budden73's big brain solution. What ended up working for me was simply restarting my computer, give it a shot.
Solution 14 - Javascript
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.
Solution 15 - Javascript
What about:
extend (config, ctx) {
config.resolve.symlinks = false
}
Solution 16 - Javascript
Thanks to budden73's answer, I did a little improvement on the debug process.
- Open dev tool
- click on the
warn
message, and click on the first line of the warn message, you will be directed to theSources
panel, with a file namevue.runtime.esm.js?xxxx
ctrl+f
to search the above file forassertNodeMatch
, not the function, but like:
if (process.env.NODE_ENV !== 'production') {
if (!assertNodeMatch(elm, vnode, inVPre)) {
return false
}
}
- Add a break point at the line
return false
- Refresh the page, and the breakpoint will be triggered.
- On the left of the Sources panel, Under
Scope->Local
, click on theelm
elment, you will be directed back to theElements
pannel. - The above element is the
client side
rendered element, compare with your code to see the difference.
If you can't find the source of the bug, the brutal way to fix it is using nuxt's <client-only>
tag.
Another likely brutal way is descirbed here. Add an isHydrate
variable which default is false, set to true in mounted
hook, and render the element after the variable set to true.
Solution 17 - Javascript
Check if have used any block-level element inside the inline element.
for example:
If you have used an HTML table make sure you have used the tag
Solution 18 - Javascript
In my case, I changed my codes from
<p v-html="$md.render(post.content)"></p>
to
<p>{{ $md.render(post.content) }}</p>