Gatsby4でMinified React errorが発生する


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

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

Chrome のコンソール:

Uncaught Error: Minified React error #418; visit 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.

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.


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

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






React+Redux 開発の基盤部分の設計・実装を得意とするフロントエンドエンジニア募集要項



投稿者 Yamasaki Kimizu

React, Redux, TypeScript プロジェクトでフロントエンド領域を担当。個人でも Next.js アプリの開発をしています。日課はRSSで取得した技術記事を読むこと、最近の関心は Core Web Vitals です。将来はでかい犬が飼いたいです。