The client-side rendered virtual DOM tree is not matching server-rendered content.

[nghiepdev]

Hi ,
I saw an error like this

[LinusBorg]

Please provide some information.

...what did you do to mak this happen? Did you change anything or did you run the original code?

If the latter, on what node version is the server running? What Browser did you use?

[nghiepdev]

@LinusBorg I think so firebase automatically updated realtime.
Run npm run dev and wait about two minutes, refresh page.

[nateajohnson]

I am getting this error on a fresh install. It doesn't happen on first load, but just doing a full refresh in the browser and I get this error in dev tools. Anyone find a solution?

[nateajohnson]

Also, I only see this error when running in dev mode. Production seems to be fine.

[richardcarls]

I have this issue on my current Vue project (I'm using the "prefetch" methods approach shown here for SSR). It looks like Vuex actions are invoked on initial render, but then we get this error because the actions haven't commited state yet, so our vdom list is empty compared to the server-rendered html.

I don't see how they are supposed to match, so wondering why there is a warning for this at all. Also wondering if hydration is scrapped for the entire app or just this particular component, and if the former, does it do this in production?

[corner1990]

I also encountered this problem, how do you solve the problem?

[amritk]

I also have this issue during ssr when rendering elements whose if statements are coming from a vuex getter

[amritk]

nvm just saw this @corner1990
vuejs/vuex#877