React18でText content does not match server-rendered HTML が出たときの対応
事象
運営している個人ブログのReactのバージョンを17から18にアップデートしたところ、特定のページにアクセスしたときにタイトルに記載のjsエラーが発生するようになりました。
console上にエラーが表示されているだけで、ページの閲覧自体は問題なく可能という状態です。
consoleに表示されていたjsエラー
Uncaught Error: Minified React error #425; visit https://reactjs.org/docs/error-decoder.html?invariant=425 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Zr (framework-4556c45dd113b893.js:1:43705)
at qu (framework-4556c45dd113b893.js:1:85317)
at ks (framework-4556c45dd113b893.js:1:109548)
at bs (framework-4556c45dd113b893.js:1:109429)
at gs (framework-4556c45dd113b893.js:1:109296)
at vs (framework-4556c45dd113b893.js:1:109159)
at ls (framework-4556c45dd113b893.js:1:104263)
at S (framework-4556c45dd113b893.js:1:138450)
at MessagePort.T (framework-4556c45dd113b893.js:1:138984)
6framework-4556c45dd113b893.js:1
Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at sa (framework-4556c45dd113b893.js:1:48561)
at xi (framework-4556c45dd113b893.js:1:122126)
at bs (framework-4556c45dd113b893.js:1:109368)
at gs (framework-4556c45dd113b893.js:1:109296)
at vs (framework-4556c45dd113b893.js:1:109159)
at ls (framework-4556c45dd113b893.js:1:104263)
at S (framework-4556c45dd113b893.js:1:138450)
at MessagePort.T (framework-4556c45dd113b893.js:1:138984)
framework-4556c45dd113b893.js:1
Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at xi (framework-4556c45dd113b893.js:1:121812)
at bs (framework-4556c45dd113b893.js:1:109368)
at gs (framework-4556c45dd113b893.js:1:109296)
at vs (framework-4556c45dd113b893.js:1:109159)
at as (framework-4556c45dd113b893.js:1:105939)
at ls (framework-4556c45dd113b893.js:1:104490)
at S (framework-4556c45dd113b893.js:1:138450)
at MessagePort.T (framework-4556c45dd113b893.js:1:138984)
error-decoder.html に表示されていたメッセージ
https://reactjs.org/docs/error-decoder.html/?invariant=425
→ Text content does not match server-rendered HTML.
https://reactjs.org/docs/error-decoder.html/?invariant=418
→ Hydration failed because the initial UI does not match what was rendered on the server.
https://reactjs.org/docs/error-decoder.html/?invariant=423
→ There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
jsエラーが発生した時の状態
- ローカルデバッグ時には発生しない(= エラーメッセージからは発生箇所などが特定できない)
- サーバー上にデプロイしたときのみ発生する。サーバーはCloudflare Pagesを使用している
Cloudflare Pagesについては以前に記事にしています。
原因
このエラーはサーバーサイドとクライアントサイドのレンダリング結果に差異があるときに表示されるエラーのようです。
私の場合、トップページのGetStaticProps内でRSSリーダー用のフィードxmlを作成しており、xml内に現在日付を埋め込むためにnew Date()を使用しています。
このとき、Cloudflare Pagesとクライアントサイド上でタイムゾーンに違いがあるため、new Date()で取得できる現在日付に差異があることからこのエラーが発生していたようです。
解決策
Cloudflare Pagesの環境変数の設定で、タイムゾーンをAsia/Tokyoにすることで解消しました。
設定方法は以下を参考にさせていただきました。
Discussion