検索

ホームページ  >  に質問  >  本文

Devtools で Remix の Indie スタックを使用してプロジェクトを初期化すると、「ハイドレーションに失敗しました」エラーが発生するのはなぜですか?

<p>Remix を学習していたときに、チュートリアルに従ってプロジェクトを初期化しましたが、Devtools を開いたときに、コンソールにいくつかのエラーが報告されていることがわかりました。 </p><p> <code>警告: <html> 内に <div> タグを含むサーバー HTML は予期されていません。 </code></p><p> <code>エラー: 初期 UI がサーバー上でレンダリングされたものと一致しないため、ハイドレーションに失敗しました。 </code>*n</p><p> 最もばかばかしいのは、Remix のホームページを開いたところ、同じエラーがそのホームページで報告されていたため、特にハイドレーションが成功したかどうか、またこのエラーが発生した理由が気になったことです。 </p>
P粉476475551P粉476475551487日前515

全員に返信(1)返信します

  • P粉043566314

    P粉0435663142023-08-30 17:16:14

    これは、DOM を変更するブラウザ拡張機能によって引き起こされる よく知られた React の問題です。

    Remix では、<div id="root" /> ;## だけでなく、<html /> 全体がレンダリングされるため、より明白です。 ＃。 拡張機能がインストールされていない (またはシークレット モード) でブラウザ プロファイルを使用すると、ブラウザ拡張機能が問題の原因であるかどうかを確認できます。

    Kiliman は、次の場所で回避策を示しています:

    https://github.com/kiliman/remix-hydration-fix

    これには、ヘッダーとアプリケーションを別々にレンダリングすることが含まれます。

    返事
    0
  • キャンセル返事