web-dev-qa-db-ja.com

Vuejsエラー：クライアント側でレンダリングされた仮想DOMツリーがサーバーレンダリングと一致しない

私はNummtアプリにNuxt.js/Vuejsを使用しており、さまざまな場所でこのエラーに直面し続けます。

    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.

このエラーをデバッグする最良の方法は何ですか？クライアントとサーバーの仮想DOMツリーを記録/取得できるので、エラーのある場所を比較して見つけることができますか？

鉱山は大規模なアプリケーションであり、手動で確認することは困難です。

javascriptvue.jsvuejs2nuxt.js
14
asanas

部分的な回答：Chrome DevToolsを使用すると、問題をローカライズし、問題の原因となった要素を正確に確認できます。次の手順を実行します（Nuxt 5.6.0とChrome 64.0.3282.186）

  1. Chrome（F12）にDevToolsを表示
  2. 「クライアント側でレンダリングされた仮想DOMツリー...」という警告が発生するページをロードします。
  3. DevToolsコンソールで警告までスクロールします。
  4. 警告のソースの場所のハイパーリンクをクリックします（私の場合はvue.runtime.esm.js：574でした）。
  5. そこにブレークポイントを設定します（ソースコードブラウザーの行番号を左クリックします）。
  6. 同じ警告を再び表示するようにします。常に可能だと言っているわけではありませんが、私の場合はページをリロードしました。警告が多い場合は、msg変数の上にマウスを移動してメッセージを確認できます。
  7. メッセージを見つけてブレークポイントで停止したら、コールスタックを確認します。 1フレーム下をクリックして「パッチ」を呼び出し、ソースを開きます。 hydrateの実行行の4行上のpatch関数呼び出しにマウスを合わせます。 hydrateのソースへのハイパーリンクが開きます。
  8. hydrate関数で、最初から約15行移動し、falseがassertNodeMatchを返した後にfalseが返されるブレークポイントを設定します。そこにブレークポイントを設定し、他のすべてのブレークポイントを削除します。
  9. 再び同じ警告を出す。これで、ブレークポイントに到達すると、hydrate関数で実行が停止します。 DevToolsコンソールに切り替えて、Elm、次にvnodeを評価します。ここで、ElmはサーバーがレンダリングするDOM要素であるように見えますが、vnodeは仮想DOMノードです。 ElmはHTMLとして印刷されるため、エラーが発生した場所を特定できます。
37
budden73

私が観察からこれまでに見つけたのは、jQuery（特に）のようなサードパーティのパッケージを使用しているときに、htmlタグがdomに挿入される場合があることです。したがって、Vue/Nuxtはdomツリーのトラックを失い、不平を言い始めます。

私は同じ問題を抱えていて、しばらくしてすべてのjQueryを削除し、jQueryの機能をVuejsに置き換えたところ、これらのエラーはすべてなくなりました。

0
Noob Coder

DOMを変更する統合（Google AnalyticsやFB Pixelなど）を処理する方法の例については、こちらをご覧ください。基本的にプラグインを作成し、SSRから除外します。

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

0
Michael Cole

さて、これはばかげて聞こえるでしょう。サーバーの再起動や.nuxtディレクトリの削除など、さまざまなソリューションを15分ほど試しましたが、@ budden73の大きな頭脳のソリューションを使用するのが面倒でした。最終的に私のために働いたのは、単純にコンピューターを再起動するでした。

0
Mark Sonn