中野's workspace

  • Profile
  • Privacy
  • Contact

2021/11/06

Gatsby.jsをv2からv4にアップグレード

  • #Gatsby

目次

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

.nvrmc
v14.15.4

14.15以上のバージョンを指定して再度pushし、無事サイトが表示された。

感想

もっと苦戦するとかと思っていたが、アップグレードしてしまって、ビルド時に出るエラーに粛々と対処していくだけで問題無くバージョンアップが完了してしまった。

エラーメッセージもとても親切なのでどこが原因でエラーが出ているのか分からないといった事態には全くならなかった。

バージョンアップ自体面倒で先延ばしにしていたものではあるが、もっと早くすれば良かったと思う。(少なくとも先にv2 -> v3にはしておくべきだった。)

バージョンアップしてどうなったかまでは分からないので、今後調べていかなきゃ。

このエントリーをはてなブックマークに追加
  • Copyright © 2019. Makoto Nakano
  • ALL Tags