The client-side rendered virtual DOM tree is not matching server-rendered content... Что может выдавать ошибку?

Добрый день.
Разместил на хостинге проект ssr - vue.js
Когда открываю в браузере сайт выдаёт такую ошибку.

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.

Это точка входа в клиент

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')
})
  • Вопрос задан
  • 1436 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы