Gatsbyで作っているサイトをv3にアップデートしました。
v2からv3で何が変わったのか
Introducing Gatsby 3.0 – Faster in Every Way that Matters
まず、Incremental Build（差分ビルド）ができるようになり、ビルド時間が短縮された。
記事を追加／更新した際に、数分程度かかっていたのが10秒以下に短くなったとのこと♪
画像系プラグインGatsby Imageが刷新されて、画像が扱いやすく、表示パフォーマンスも高くなった。
もともとGatsbyは画像の取得／表示の扱いが難しかったので、使いやすくなったのは嬉しい。
Gatsbyの更新
Gatsbyのマニュアルに従って更新していきました。
package.jsonのgatsbyのバージョンを編集します。
# package.json
{
"dependencies": {
"gatsby": "^3.0.0"
}
}npm 7を使っているので、--legacy-peer-depsオプションをつけて、最新版をインストール
#Gatsby最新版インストール
npm install gatsby@latest --legacy-peer-deps
#各パッケージの最新verを確認
npm outdated各パッケージのアップデート
npm-check-updatesを使って、npmの取得モジュールのアップデートをチェック→package.jsonの最新化→パッケージの更新をします。
# npm-check-updatesをインストール。これでncuが使えるようになる
npm install -g npm-check-updates
# 更新対象パッケージの表示
ncu
# packege.jsonを書き換える
ncu -u
# パッケージの更新
npm update --legacy-peer-depsエラーの対応
バージョンアップ後、ビルドをするとエラーの通知が出て、対応が必要な箇所がでてきました。
gatsby-plugin-sitemap
"gatsby-plugin-sitemap" threw an error while running the onPostBuild lifecycle:
Body must be a string. Received: undefined.gatsby-plugin-sitemap | Gatsby
gatsby-plugin-sitemapはオプションの記載方法がexclude→excludesになったもよう。
#gatsby-config.js 変更後
{
resolve: `gatsby-plugin-sitemap`,
options: {
excludes: [`/category/**`,`/tags/**`,`/blog/**`],
},
},excludeをexcludesに変更するだけでうまくいきました！
gatsby-transformer-sharp
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-imageからgatsby-plugin-image にスイッチするよう推奨されています。
①gatsby-plugin-imageをインストール
npm install gatsby-plugin-image②gatsby-config.jsに追記
#gatsby-config.js
module.exports = {
plugins: [
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
],
}③コマンドで自動で置き換えしてくれます。
npx gatsby-codemods gatsby-plugin-imageこれで、無事に動くようになりましたー。