Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered

by

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.

More Related Contents:

  1. How to use .env variables in Nuxt 2 or 3?
  2. How to install jQuery into Nuxt.js?
  3. Use arrow function in vue computed does not work
  4. How to add external JS scripts to VueJS Components?
  5. Vue 2 – Mutating props vue-warn
  6. Make VueJS and jQuery play nice
  7. How to fix navigator / window / document is undefined in Nuxt
  8. Why does Prettier not format code in VS Code?
  9. VueJs 2.0 emit event from grand child to his grand parent component
  10. Vuex state on page refresh
  11. Can I pass parameters in computed properties in Vue.Js
  12. Vuejs and Vue.set(), update array
  13. How to watch store values from vuex?
  14. Vue – Deep watching an array of objects and calculating the change?
  15. How to format Vuetify data table date column?
  16. How to listen for ‘props’ changes
  17. Passing props dynamically to dynamic component in VueJS
  18. Accessing Vuex state when defining Vue-Router routes
  19. Vue JS: Difference of data() { return {} } vs data:() => ({ })
  20. Vue.js: Conditional class style binding
  21. Running an Express server middleware alongside Nuxt
  22. Access vue instance/data inside filter method
  23. Parentheses while calling a method in Vue
  24. Vue template or render function not defined yet I am using neither?
  25. Global data with VueJs 2
  26. Passing props with programmatic navigation Vue.js
  27. Vue.js – update router view
  28. How to limit iteration of elements in `v-for`
  29. Detect Back Button in Navigation Guards of Vue-Router
  30. How to pass an object as props with vue router?

Leave a Comment