web-dev-qa-db-fra.com

Erreur Vuejs: L'arbre DOM virtuel rendu côté client ne correspond pas au rendu serveur

J'utilise Nuxt.js/Vuejs pour mmy app, et je continue à faire face à cette erreur à différents endroits:

    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.

Je voudrais comprendre quelle est la meilleure façon de déboguer cette erreur? Est-ce un moyen d'enregistrer/d'obtenir l'arborescence DOM virtuelle pour le client et le serveur afin de pouvoir comparer et trouver où se situe l'erreur?

Le mien est une grande application et la vérification manuelle est difficile.

javascriptvue.jsvuejs2nuxt.js
14
asanas

Réponse partielle: avec Chrome DevTools, vous pouvez localiser le problème et voir exactement quel élément a causé le problème. Procédez comme suit (je l'ai fait avec Nuxt 5.6.0 et Chrome 64.0.3282.186)

  1. Afficher DevTools en Chrome (F12)
  2. Chargez la page qui provoque l'avertissement "l'arborescence DOM virtuelle rendue côté client ...".
  3. Faites défiler jusqu'à l'avertissement dans la console DevTools.
  4. Cliquez sur le lien hypertexte de l'emplacement source de l'avertissement (dans mon cas, c'était vue.runtime.esm.js: 574).
  5. Définissez-y un point d'arrêt (clic gauche sur le numéro de ligne dans le navigateur de code source).
  6. Faites le même avertissement pour réapparaître. Je ne dis pas que c'est toujours possible, mais dans mon cas j'ai simplement rechargé la page. S'il existe de nombreux avertissements, vous pouvez vérifier le message en déplaçant la souris sur la variable msg.
  7. Lorsque vous avez trouvé votre message et vous êtes arrêté sur un point d'arrêt, regardez la pile des appels. Cliquez sur une image vers le bas pour appeler "patch" pour ouvrir sa source. Passez la souris sur hydrate, la fonction appelle 4 lignes au-dessus de la ligne d'exécution dans patch. Un lien hypertexte vers la source de hydrate s'ouvrirait.
  8. Dans la fonction hydrate, déplacez environ 15 lignes depuis le début et définissez un point d'arrêt où false est renvoyé après que assertNodeMatch a renvoyé false. Définissez-y le point d'arrêt et supprimez tous les autres points d'arrêt.
  9. Répétez le même avertissement. Désormais, lorsque le point d'arrêt est atteint, l'exécution doit s'arrêter dans la fonction hydrate. Basculez vers la console DevTools et évaluez Elm puis vnode. Ici, Elm semble être un élément DOM rendu par le serveur tandis que vnode est un nœud DOM virtuel. L'orme est imprimé en HTML afin que vous puissiez déterminer où l'erreur s'est produite.
37
budden73

Ce que j'ai trouvé si loin de l'observation, c'est que lorsque vous utilisez des packages tiers comme jQuery (spécialement), ils injectent parfois des balises html dans le dom. Vue/Nuxt perd donc la trace de l'arbre dom et commence à se plaindre.

J'avais le même problème et après un certain temps, j'ai supprimé tous les jQuery et remplacé la fonctionnalité jQuery par Vuejs et ces erreurs ont toutes disparu.

0
Noob Coder

Voir ici pour un exemple de gestion des intégrations (par exemple, Google Analytics ou FB Pixel) qui modifient le DOM. Fondamentalement, créez un plugin et excluez-le de SSR.

https://nuxtjs.org/faq/google-analytics/

0
Michael Cole

Ok, ça va paraître idiot. J'ai essayé un tas de solutions différentes pendant environ 15 minutes, comme le redémarrage du serveur et la suppression du répertoire .nuxt, mais j'étais trop paresseux pour utiliser la solution big brain de @ budden73. Ce qui a fini par fonctionner pour moi était simplement redémarrage de mon ordinateur, essayez-le.

0
Mark Sonn