• 商品一覧
  • お問合せ
  • ブログ記事
お仕事の依頼
好かれるマーケティング研究室のデフォルトサムネイル画像

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

2021-11-11
Gatsbyは最近V4になりました。
今回は、Gatsby V3で作成したサイトをGatsby V4に更新する方法を紹介しています。
初めに、gitに最新版を保存していない場合は、最初に保存しておくようにしましょう。ウェブサイトが動かなくなるなど、何が起こるかわかりませんからね。
package.jsonでGatsbyのバージョンが、"^3.0.0"と指定しているとメジャーバージョンアップは行われません。そのようなパッケージを確認するにはoutdatedコマンドを使います。
npm outdated
多くのパッケージはnpm updateで更新できますが、GatsbyのようにV3からV4に変わるようなメジャーバージョンアップは行われません。
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でのウェブサイトトップページ
Gatsby V4でウェブサイトが正常に動作しています。

無料メルマガ

今すぐもっと好かれる!

プロフィール

西松 大輝:マーケティング・サイエンティスト

数字から愛へ
・「何を変えるか?」を行動経済学・TOCLSSで分析する。
・「何を伝えるか?」を戦略・マーケティングで明確にする。
・「何を測定するか?」を機械学習・ITで支援する。

"全部"やらなくっちゃあならないってのが 「マーケティング・サイエンティスト」のつらいところだな。
覚悟はいいか?僕はできてる
  • お仕事の依頼
  • お問合せ
  • プライパシーポリシー
  • 特定商取引法に基づく表記
2019-2022, 好かれるマーケティング研究室©