Devtools で Remix の Indie スタックを使用してプロジェクトを初期化すると、「ハイドレーションに失敗しました」エラーが発生するのはなぜですか?
P粉476475551
2023-08-30 00:12:22
<p>Remix を学習していたときに、チュートリアルに従ってプロジェクトを初期化しましたが、Devtools を開いたときに、コンソールにいくつかのエラーが報告されていることがわかりました。 </p><p>
<code>警告: <html> 内に <div> タグを含むサーバー HTML は予期されていません。 </code></p><p>
<code>エラー: 初期 UI がサーバー上でレンダリングされたものと一致しないため、ハイドレーションに失敗しました。 </code>*n</p><p>
最もばかばかしいのは、Remix のホームページを開いたところ、同じエラーがそのホームページで報告されていたため、特にハイドレーションが成功したかどうか、またこのエラーが発生した理由が気になったことです。 </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
これは、DOM を変更するブラウザ拡張機能によって引き起こされる よく知られた React の問題です。
Remix では、<div id="root" /> ;## だけでなく、<html />
Kiliman は、次の場所で回避策を示しています:全体がレンダリングされるため、より明白です。 ＃。拡張機能がインストールされていない (またはシークレット モード) でブラウザ プロファイルを使用すると、ブラウザ拡張機能が問題の原因であるかどうかを確認できます。https://github.com/kiliman/remix-hydration-fix
これには、ヘッダーとアプリケーションを別々にレンダリングすることが含まれます。