[Vue warn]: визуализированное виртуальное дерево DOM на стороне клиента не соответствует отображаемому на сервере содержимому (Nuxt / Vue / lerna monorepo) - PullRequest
Новая
       21

[Vue warn]: визуализированное виртуальное дерево DOM на стороне клиента не соответствует отображаемому на сервере содержимому (Nuxt / Vue / lerna monorepo)

0 голосов
/ 30 января 2020

Я пытаюсь запустить базовое c приложение Nuxt с внешним компонентом Vue, созданным с использованием vue -cli внутри lerna monorepo.

На странице кратко отображается содержимое компонента (сервер отображается) и затем он исчезает, выдавая следующие ошибки:

"export 'default' (imported as 'Header') was not found in 'a2b-header'

, затем

Mismatching childNodes vs. VNodes: NodeList(7) [svg, text, div#app, text, h2.subtitle, text, div.links] (7) [VNode, VNode, VNode, VNode, VNode, VNode, VNode]

и, наконец, красное Vue предупреждение

[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 <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Я использую для внешнего компонента настройки пакет. json: 

{
  "name": "a2b-header",
  "version": "0.1.0",
  "private": true,
  "main": "./dist/a2b-header.umd.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib --name a2b-header src/main.js",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.4.3",
    "vue": "^2.6.10"
  },
  ...
}

my main . js выглядит следующим образом: 

import Header from './Header.vue'

export default Header

и сам файл компонента Заголовок. vue это: 

<template>
  <div id="app">
    <h1>Welcome to Your Vue.js App</h1>
  </div>
</template>

<script>
export default {
  name: 'Header'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

, что все в процессе импортируется в проект Nuxt index. vue с использованием простого: 

import Header from 'a2b-header'

и .... это не работает. Я думаю, что несоответствие SSR и клиентов связано с неправильным экспортом, возможно, решаемым с помощью некоторого конфига веб-пакета, но после попытки многих разных вещей я здесь борюсь.

Причина, по которой я хочу, чтобы это заработало в том, что в monorepo мы планируем иметь различные Vue приложения (как SPA, так и Nuxt), и возможность инкапсулировать общий код в компоненты, которые можно повторно использовать в различных проектах, имеет решающее значение.

Ответы [ 2 ]

0 голосов
/ 31 января 2020

ОК после большого количества ударов головой, решение для этого заключается в следующем. В nuxt.config.js в блоке компоновки внутри функции расширения нам нужно добавить: 

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

Этот параметр, наконец, корректно создает общий пакет, связанный по ссылке с узлом Numo проекта Nuxt. Ошибка экспорта по умолчанию исчезла, поэтому все несоответствия предупреждений SSR и Vnode.

0 голосов
/ 31 января 2020

Вы можете попробовать обернуть компонент или перенести все манипуляции с dom на установленный крюк жизненного цикла.

https://github.com/nuxt/nuxt.js/issues/1700#issuecomment -331099596

и это ответ может вам помочь

...