2021/11/06
Gatsby.jsをv2からv4にアップグレード
2019年に立ち上げたこのブログも2年ほど経ち、Gatsby.js自体のバージョンも上がってきた。
定期的にアップグレードした方が良かろうということで、試しにやってみたら割と簡単だったので記録として残す。
2021年11月現在、Gatsby.jsは4まで到達している。
いきなりv2 -> v4に移行する記事は見当たらなかったが、とりあえずv2からv3への移行記事を基にしてなんの問題も無かった。
安全策に移行しようと思うと一回v2 -> v3 に移行して、検証してからv3 -> v4が良いとは思うが個人ブログだし、そこまで複雑なもんでも無いからエイヤでやってしまった。
どうせPR出した時点でNetlify側でデプロイできるか検証してくれるし、最悪そこで確認すれば良いと思ったのもある。
手順
何はともあれ最新を落としてくる
yarn add gatsby@latest
差分はこんな感じ
- "gatsby": "^2.3.32"
+ "gatsby": "^4.1.0"
関連するモジュールもアップグレード
yarn upgrade-interactive --latest
どのモジュールをアップグレードするか選択しろみたいな表示が出たが、面倒なので全選択してアップグレードした。
ここまできたらv2からv3への移行記事を軽く眺めて変更点を見る。
使ってそうだったら変更方法も記載しているので見てみる。
ある程度修正出来たらgatsby develop
してビルド出来るか、ローカルで色々動かしてエラー起きていないか見る。
いくつかエラー出たが、エラーメッセージがちゃんとしているので修正にはそこまで手間取らなかった。
良い感じなので一旦pushしてPRを出してNetlify側でビルド出来るか確かめてみる。
5:29:30 PM: error gatsby@4.1.0: The engine "node" is incompatible with this module. Expected version ">=14.15.0". Got "12.18.0"
…エラーが出た。 どうやらNetlify側でビルドに使用したnodeのバージョンが古いことによるエラーらしい。
.nvmrcファイルにnodeのバージョンを指定することで回避できるとのこと。
https://blog.htkyama.org/nvmrc_netlify
v14.15.4
14.15以上のバージョンを指定して再度pushし、無事サイトが表示された。
感想
もっと苦戦するとかと思っていたが、アップグレードしてしまって、ビルド時に出るエラーに粛々と対処していくだけで問題無くバージョンアップが完了してしまった。
エラーメッセージもとても親切なのでどこが原因でエラーが出ているのか分からないといった事態には全くならなかった。
バージョンアップ自体面倒で先延ばしにしていたものではあるが、もっと早くすれば良かったと思う。(少なくとも先にv2 -> v3にはしておくべきだった。)
バージョンアップしてどうなったかまでは分からないので、今後調べていかなきゃ。