Open6
remixで[Hydration failed because the initial UI does not match what was rendered on the server.]が発生した
iwamasa発生条件
分かっている範囲で記載
- remix: 2.12.1
- react: 18.3.1
- Google Chrome
- 拡張機能をOFFにすると再現しない(シークレットウィンドウで発生しない)
- LastPassのようなDOMを書き換える系の拡張機能で発生するっぽい
- オフにしたら出なくなった
エラー内容
# 1つ目
Warning: Expected server HTML to contain a matching <meta> in <head>. Error Component Stack
# 2つ目
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
同じエラーに遭遇された方の記事
試した対象方法
Reactを19(beta)にしたら発生しなくなった
→でも流石にbetaをプロダクション利用するのは・・・・
iwamasaそもそもハイドレーションを理解していない
ざっくり(GPT先生より)
サーバーサイドでレンダリングされた静的なHTMLに、クライアントサイドでReactなどのJavaScriptがアタッチして、インタラクティブな状態にするプロセスを指す
iwamasa他の解決方法を模索
日本語で出て来なくなったので英語の文献で調査
iwamasa1つ分かったこと
どうやらremixが原因ではなく、ReactでのSSRが原因とのこと
(先ほど添付したサイトに書いてあった&Reactのバージョンアップで直りそうだった)
iwamasa英語の文献で分かったこと
以下のライブラリで解決する方法があるらしい。
ただ、React18.3以降で解決したらメンテしなくなると明記されている。
これ入れるのちょっとなぁ〜という印象なので他の方法を模索したい