Gatsbyをv4からv5に移行するのにやったこと

マイグレーションガイド

公式が公開している記事を読む。(公式)

えいや

記事を読んだところ特に大きく問題となるところは見当たらなかったので、v5へアップグレードする。
package.json

npm install gatsby@latest

エラー解消

build失敗しているので解消していく

"gatsby-transformer-sharp" threw an error while running the createSchemaCustomization lifecycle:

 ERROR #11321  API.NODE.EXECUTION
"gatsby-transformer-sharp" threw an error while running the createSchemaCustomization lifecycle:
Class constructor GraphQLList cannot be invoked without 'new'
  TypeError: Class constructor GraphQLList cannot be invoked without 'new'

gatsby-transformer-sharpプラグインでエラー。 クラス コンストラクター GraphQLList は、'new' なしでは呼び出すことができませんとのこと。
使っている箇所としては、gatsby-config.jsで定義しているだけ。

GraphQLDocumentError: Unknown type "ImageSharpFluid". Did you mean "ImageSharp" or "ImageSharpEdge"?

それらしいissueを発見した。他のパッケージも全部更新する必要があったらしい。(Update Gatsby related packages)
マイグレーションの記事を理解しきれていなかった。

gatsby-*のバージョンが5を超えていたら、gatsby-*-nextに変更、5に達していない場合gatsby-*-next.5に変更。package.jsonを修正したら、関連プラグインをアップデートする。

gatsby-cliが古い

ここでめちゃくちゃはまった。何をしてもビルドが通らない。graphqlの自動型生成がうまくいっていないみたい。
調べていたところグローバルにインストールされているgatsby-cliが古いということがわかった。
まずグローバルのnodeをインストールする

volta install node

そしてgatsby-cliをアップデート

npm i -g gatsby-cli

volta list allで確認

gatsby-cli@5.3.1 (default)
    binary tools: gatsby
    platform:
      runtime: node@18.9.1
      package manager: npm@built-in

更新されている…（ここまで3日かかった）

graphqlのバリデーションにひっかかる

descriptionがない

gatsby-plugin-react-helmetが入っていたので使用していたが、gatsby-source-filesystemが指しているパスのいずれにも含まれていないからエラーらしい。最低一つでもマークダウンファイルに存在している必要がある。 参考

fieldValue.slugがとれない

構造が変わったのか、チェックが厳密になったのかよくわからなかったが、いらないなと思ったので削除して対応した

結論

関連プラグインも全てアップデートしよう。 グローバルにインストールされているパッケージも忘れずに（忘れずに）