Gatsbyをv3にアップグレードしてgatsby-blog-starterもアップグレードした

March 11, 2021

表題のとおりです。

https://okweird.netGatsbygatsby-blog-starterをベースに構築しており、基本的にはGatsby公式移行ガイドに書かれていることをやっていけばGatsby v2からv3へのアップグレードができるのですが、それ以外の作業も必要だったのでログを残しておこうと思います。

作業ログ

$ npm install gatsby@latest

まずはメインであるGatsbyのアップグレードを行います。 僕の場合、2.31.1 から 3.0.4 まで上がりました。

$ npm outdated

古い依存をリストします。 僕の場合、結果はこのような感じでした。

Package                          Current   Wanted  Latest  Location
gatsby-image                       2.5.0   2.11.0   3.0.0  gatsby-starter-blog
gatsby-plugin-feed                 2.7.0   2.13.1   3.0.0  gatsby-starter-blog
gatsby-plugin-google-gtag          2.6.0    2.8.0   3.0.0  gatsby-starter-blog
gatsby-plugin-manifest             2.6.1   2.12.1   3.0.0  gatsby-starter-blog
gatsby-plugin-offline              3.4.0   3.10.2   4.0.0  gatsby-starter-blog
gatsby-plugin-react-helmet         3.4.0   3.10.0   4.0.0  gatsby-starter-blog
gatsby-plugin-sharp                2.8.0   2.14.3   3.0.1  gatsby-starter-blog
gatsby-remark-copy-linked-files    2.4.0   2.10.0   3.0.0  gatsby-starter-blog
gatsby-remark-images               3.5.1   3.11.1   4.0.0  gatsby-starter-blog
gatsby-remark-prismjs              3.7.0   3.13.0   4.0.0  gatsby-starter-blog
gatsby-remark-responsive-iframe    2.5.0   2.11.0   3.0.0  gatsby-starter-blog
gatsby-remark-smartypants          2.4.0   2.10.0   3.0.0  gatsby-starter-blog
gatsby-source-filesystem           2.5.0   2.11.1   3.0.0  gatsby-starter-blog
gatsby-transformer-remark         2.10.0   2.16.1   3.0.0  gatsby-starter-blog
gatsby-transformer-sharp           2.6.0   2.12.1   3.0.0  gatsby-starter-blog
prismjs                           1.22.0   1.23.0  1.23.0  gatsby-starter-blog
react                            16.13.1  16.14.0  17.0.1  gatsby-starter-blog
react-dom                        16.13.1  16.14.0  17.0.1  gatsby-starter-blog
react-helmet                       5.2.1    5.2.1   6.1.0  gatsby-starter-blog
typeface-merriweather             0.0.72   0.0.72  1.1.13  gatsby-starter-blog
typeface-montserrat               0.0.75   0.0.75  1.1.13  gatsby-starter-blog

公式ガイドでは1つ1つ npm install {package}@latest するように書かれていますが、大変なので依存を最新にしてくれる npm-check-updates を使います。

$ npm install -g npm-check-updates

npm-check-updates のインストール。

$ ncu -u

package.json を最新のパッケージにアップグレード。

$ npm install

実際にパッケージをインストール。

$ npm outdated

ここで再度チェックしてみたところ、僕の場合は gatsby-image が残っていました。

Package       Current  Wanted  Latest  Location
gatsby-image    2.5.0  2.11.0   3.0.0  gatsby-starter-blog
$ npm install gatsby-image@latest

gatsby-image をアップグレードします。

ここで gatsby develop をすると以下のようなPostCSS関連のエラーが出ました。

Error: PostCSS plugin postcss-flexbugs-fixes requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

そのため、PostCSS関連もPostCSS公式の移行ガイドにしたがってアップグレードします。

$ npm install gatsby-plugin-postcss
npm install postcss

次は

warn [gatsby-transformer-sharp] The "fixed" and "fluid" resolvers are now deprecated. Switch to "gatsby-plugin-image" for better performance and a simpler API. See https://gatsby.dev/migrate-images to learn how.

というメッセージが出ていたため gatsby-plugin-image を使うようこちらも公式移行ガイドに従いアップグレードします。

$ npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp

関連するプラグインをインストールします。

$ npx gatsby-codemods gatsby-plugin-image

gatsby-plugin-image 用にコードを自動的に修正してくれます。

このあと必要な場合は手動で修正を行います。僕の場合は必要ありませんでした。

以上で gatsby develop を行ったらエラーなしに表示されるようになりました!

最後に

あまりGatsbyもNodeパッケージ周りも詳しくないため無駄があるかもしれません。もっとこうした方がいい点があればご指摘いただければと思います。

それでは良いGatsbyライフを!


Takayuki NAGATOMI 永冨隆之
Takayuki NAGATOMI 永冨隆之

1985年に生まれて以来ずっと福岡在住。高校を1年で中退後、引きこもって海外ゲームばかり遊んでいたら英語が得意になり、TOEICスコア960を獲得。

英語が得意なら言語を扱うプログラミングも向いているのではないかという恩師の勧めにより26歳の時に情報系の専門学校に入学。

29歳にしてソフトウェア・エンジニアとしてのキャリアをスタートした、レールの無い道を行くプログラマーです。

現職:GMOペパボ株式会社