Vuejs Error: the Client-Side Rendered Virtual Dom Tree Is Not Matching Server-Rendered

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)

1. Show DevTools in Chrome (F12)
2. Load the page that causes "the client-side rendered virtual DOM tree..." warning.
3. Scroll to the warning in DevTools console.
4. Click at the source location hyperlink of the warning (in my case it was vue.runtime.esm.js:574).
5. Set a breakpoint there (left-clicking at line number in the source code browser).
6. 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.
7. 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 in patch. Hyperlink to the source of hydrate would open.
8. In the 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.
9. Make the same warning to happen again. Now, when breakpoint is hit, execution should stop in the 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.

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content ( Nuxt / Vue / lerna monorepo )

OK after a lot of head-banging, the solution for this is as follows. In nuxt.config.js, in the build block inside extend function we need to add:

    extend (config, ctx) {
      config.resolve.symlinks = false
    }

This setting finally correctly builds a shared package symlinked into the Nuxt project node_modules. The export default error is gone and so all mismatching SSR vs Vnode warnings.

Nuxt.js error: The client-side rendered virtual DOM tree is not matching server-rendered content

Figured it out.

authorObj.bioHeadline has a link, and because of the code below I had a nested link....which I guess isn't allowed.

              <nuxt-link :to="getAuthorUrl">
                <p class="tw-font-bold kb-subtle-link tw-text-sm md:tw-text-lg">{{ authorObj.fullName }}</p>
                  <p class="tw-text-xs tw-pt-1 tw-text-gray-600" v-html="authorObj.bioHeadline"></p>
              </nuxt-link>

Generated HTML:

<a href="/" class=""><p class="tw-font-bold kb-subtle-link tw-text-sm md:tw-text-lg">kp</p> <p class="tw-text-xs tw-pt-1 tw-text-gray-600">Founder at <a href="https://www.example.com" target="_blank">Domain</a></p></a>

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

Well, the reason for The client-side rendered virtual DOM tree is not matching server-rendered content is probably the use of randomness - more specifically the usage of getRandomString function in the NewsList.vue component to generate unique ID's

As @kissu pointed out in his answer

any random is risky

new Date() inside NewsListItem.vue will cause problem too as the resuting Date object will be different on server and the client causing client side VDom difference from the HTML generated by server...

Nuxt how to debug: The client-side rendered virtual DOM tree is not matching server-rendered content

Apparently in my case, the TypeError: Cannot read property 'toLowerCase' of undefined error was rising at error-reporting time.

I happened to have the The client-side rendered virtual DOM tree is not matching server-rendered content warning in another context, I did receive useful explanations and it did not block execution so I shall consider the bug-over-the-bug was bad luck and would eventually get naturally fixed, unless it reproduces in the future.

If you happen to have the same error, do not despair.

First, report the TypeError: Cannot read property 'toLowerCase' of undefined error to the nuxt repo.

Then, to debug, I encourage you to comment parts of your templates to find how to remove the error. In my case, it was in the layout, hence it happened all the time, but once I understood that, I found the explanation quite quickly (though it was a mysterious different behavior of date-fns between node environment and browser).

Good luck!

---

Related Topics