Gatsbyで発生したエラー"Minified React error #418"を解決する

このブログはGatsbyで作っているのですが，ブラウザのコンソールログに以下のようなエラーが出ていることに気づきました．（PageSpeedのレポートで気づきました．）

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 sa (react-dom.production.min.js:131:159)
    at Ei (react-dom.production.min.js:293:379)
    at ks (react-dom.production.min.js:280:389)
    at ys (react-dom.production.min.js:280:320)
    at vs (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.T (scheduler.production.min.js:14:128)

エラーはgatsby buildした場合のみ発生し，gatsby developでは発生しません．

TL;DR

プロフィールアイコン画像の表示に使っているgatsby-imageが問題だった．
gatsby-plugin-imageに変えたことでエラーが出なくなった．

環境

Gatsby: 5.7
gatsby-plugin-image: 7.7

調査

検索してみると，windowオブジェクトなどを使ってプリレンダリングとUIが一致しない場合や，画像を使った場合に問題が出ることがあるようです．

cf. hydration error in production but not in dev environment · gatsbyjs/gatsby · Discussion #36232

私の場合は後者が原因だったので，以下のnrandellさんの投稿が大きなヒントになりました．

Is this anything to do with images being loaded from cache? I’m seeing a lot of these issues, especially when using images. I’m just wondering whether the javascript for images is running before the react javascript runs, replaces some of the dom and causes these issues.

Not fully investigated, but when is made my images lazy, it seemed to fix some of these problems.

原因の特定と解決方法

どの部分でエラーが出ているのかデバッグする方法がわからなかったので，reactコンポーネントを削っていったりしながら原因を特定しました．問題の箇所はgatsby-imageを使っているプロフィールアイコン画像でした．

このgatsby-imageの使い方が悪いのかと思って公式ドキュメントを見たところ，すでにdeprecatedだったので，そこで推奨されているgatsby-plugin-imageに変更したことでエラーは出なくなりました．

cf. gatsby-image | Gatsby

cf. gatsby-plugin-image | Gatsby

修正

詳しくは上記の公式ドキュメントを読んでください．

私の場合はgatsby-plugin-sharp, gatsby-source-filesystem, gatsby-transformer-sharpの3つはすでに導入済みだったので，gatsby-plugin-imageのみ追加し，gatsby-imageを削除しました．

yarn add gatsby-plugin-image
yarn remove gatsby-image

また，gatsby-config.jsにgatsby-plugin-imageを追加しました．

--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -141,5 +141,6 @@ module.exports = {
     },
     'gatsby-plugin-sitemap',
     `gatsby-plugin-sass`,
+    `gatsby-plugin-image`,
   ],
 }

そして，コンポーネントでgatsby-imageを使っている部分をgatsby-plugin-imageに変更しました．

変更前

<Image
  fixed={data.avatar.childImageSharp.fixed}
  alt={author}
/>

変更後

<StaticImage
  src='../../content/assets/profile-pic.jpg'
  alt={author}
  width={50}
  height={50}
  layout="fixed"
/>