Gatsby4でMinified React errorが発生する

はじめに

こんにちは。フロントエンドエンジニアの kimizuy です。

Gatsby4 かつ本番環境で以下のエラーが発生するようになりました。サイトへの実際の影響は今のところ確認していませんが、エンジニアの矜持としてコンソールに出るエラーはできるだけ潰しておきたいところです。

Chrome のコンソール:

react-dom.production.min.js:131
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 sl (react-dom.production.min.js:131:159)
    at xi (react-dom.production.min.js:293:379)
    at bs (react-dom.production.min.js:280:389)
    at vs (react-dom.production.min.js:280:320)
    at gs (react-dom.production.min.js:280:180)
    at as (react-dom.production.min.js:268:209)
    at S (scheduler.production.min.js:13:203)
    at MessagePort.R (scheduler.production.min.js:14:128)

詳細

Gatsby4 と React18 の組み合わせで発生するようです。React18 ではハイドレーションエラーが警告ではなくエラーとして表示されるようになりました。

Stricter hydration errors: Hydration mismatches due to missing or extra text content are now treated like errors instead of warnings. React will no longer attempt to “patch up” individual nodes by inserting or deleting a node on the client in an attempt to match the server markup, and will revert to client rendering up to the closest boundary in the tree. This ensures the hydrated tree is consistent and avoids potential privacy and security holes that can be caused by hydration mismatches.

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#other-breaking-changes

Gatsby の React 18 support ディスカッションでフィードバックが寄せられています。このエラーのすべての原因が Gatsby とは限りませんが、基本的な構成のプロジェクトや特定のブラウザのバージョンでもエラーが発生するようです。

We have recently upgraded to v4 from v2, and even paring the site right back to its most basic, I still for the life of me can’t figure out why this error is occurring. It seems to be even introducing the most basic hook causes the error. As others have observed, it can sometimes be browser dependent. Rarely see it in Chrome, see it every time in Firefox.

https://github.com/gatsbyjs/gatsby/discussions/31943#discussioncomment-3590744

対策案

例えば、私の場合は useState の initial state の計算にクライアントの値が必要な場合に同様のエラーが発生しました。この時は useEffect に計算のロジックを移すことで解消できました。

また react-hook-form など、ページ内で使われているライブラリが React18 に対応しているかどうかもこのエラーに影響している可能性があります。

おわりに

途中経過の共有といった感じになってしまいましたが、本記事が誰かのお役に立てると幸いです。

以上、お読みいただきありがとうございました。