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ツリーを記録/取得できるので、エラーのある場所を比較して見つけることができますか?

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

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行移動し、falseassertNodeMatchを返した後に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