Gatsby V3からV4にアップデートする

Gatsbyは最近V4になりました。

今回は、Gatsby V3で作成したサイトをGatsby V4に更新する方法を紹介しています。

初めに、gitに最新版を保存していない場合は、最初に保存しておくようにしましょう。ウェブサイトが動かなくなるなど、何が起こるかわかりませんからね。

package.jsonでGatsbyのバージョンが、"^3.0.0"と指定しているとメジャーバージョンアップは行われません。そのようなパッケージを確認するにはoutdatedコマンドを使います。

npm outdated

多くのパッケージはnpm updateで更新できますが、メジャーバージョンアップは行われません。

npm update

メジャーバージョンアップを行うには、パッケージの後ろに"@latest"をつけて、コマンドを実行する必要があります。

npm install gatsby@latest

このコマンドを実行するとV3からV4へのメジャーバージョンアップが実行され、package.jsonをみれば、V4に書き換えられているのがわかります。

  "dependencies": {
   "gatsby": "^4.0.0",

Gatsbyプラグインのアップデート

プラグインをアップデートしようとすると、以下のようなエラーが出ることがあります。

daiki:tutorial-site nishimatsu$ npm install gatsby-plugin-image@latest
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: gatsby-jsturorial-site@1.0.0
npm ERR! Found: gatsby@4.0.0
npm ERR! node_modules/gatsby
npm ERR!   gatsby@"^4.0.0" from the root project
npm ERR!   peer gatsby@"^4.0.0-next" from gatsby-plugin-image@2.0.0
npm ERR!   node_modules/gatsby-plugin-image
npm ERR!     gatsby-plugin-image@"2.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer gatsby@"^3.0.0-next.0" from gatsby-plugin-sharp@3.14.1
npm ERR! node_modules/gatsby-plugin-sharp
npm ERR!   gatsby-plugin-sharp@"^3.14.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/nishimatsu/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nishimatsu/.npm/_logs/2021-10-22T01_18_59_918Z-debug.log

"Could not resolve dependency"となっているプラグインを先にアップデートするとうまくいくことがあります。今回の場合、gatsby-plugin-sharpが問題になっているので、gatsby-plugin-sharpを先にlatestにバージョンアップしておきます。

また、プラグインによっては、最新に更新されておらず、GatsbyV4に対応していないこともあります。…といっても、多くの場合は GatsbyV4に更新しても動く可能性は高いです。

その場合は、--legacy-peer-depsを試してみましょう。

npm install --legacy-peer-deps プラグイン名@latest

最後に実行してみて、サイトがちゃんと動く確認しておきましょう。

npm run develop

Gatsby V4でウェブサイトが正常に動作しています。

ここまで読んでいただけたなら、”スキ”ボタンを押していただけると励みになります！(*´ー｀*)ﾜｸﾜｸ