S
S
Sergey Zababurin2018-06-03 10:26:29
Vue.js
Sergey Zababurin, 2018-06-03 10:26:29

The client-side rendered virtual DOM tree is not matching server-rendered content... What could be causing the error?

Good afternoon.
I hosted the project ssr - vue.js.
When I open the site in the browser, I get such an error.

Vue warn]: 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 , or missing . Bailing hydration and performing full client-side render.

This is the entry point to the client

entry-client.js

import { createApp } from './app'
import Vue from 'vue'

const { app, router, store } = createApp()

import { screenControl } from "./util/resize.js"
import { mouseControl } from "./util/mouse.js"
import { keysControl } from "./util/keys.js"

import firebase from 'firebase'
import { config } from './config/firebaseConfig.js'

import { auth } from "./util/auth.js"

firebase.initializeApp(config)

if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__)
}

screenControl.set(app.$store)
screenControl.event(app.$store)
mouseControl.scroll(app.$store)
mouseControl.coordinates(app.$store)
keysControl.event(app.$store)

app.$store.commit( 'sysWindowLoaded', true )

auth.changeState(app.$store, this)

Vue.mixin({
  beforeRouteUpdate (to, from, next) {
    const { asyncData } = this.$options
    if (asyncData) {
      asyncData({
        store: this.$store,
        route: to
      }).then(next).catch(next)
    } else {
      next()
    }
  }
})

router.onReady(() => {

  router.beforeResolve((to, from, next) => {

    const componentsMatched = router.getMatchedComponents(to)
    const componentsPrevMatched = router.getMatchedComponents(from)
    let diffed = false

    const activated = componentsMatched.filter((c, i) => {
      return diffed || (diffed = (componentsPrevMatched[i] !== c))
    })
    if (!activated.length) {
      return next()
    }
    Promise.all(activated.map(c => {
      if (c.asyncData) {
        return c.asyncData({ store, route: to })
      }
    }))
    .then(() => {
      next()
    })
    .catch(next)
  })
  app.$mount('#app')
})

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question