お久しぶりです!!!念願の久々更新です。
2021年7月から進めていたウェブサイトのリニューアルがようやく終わりました！涙
WebP対応しつつv3にアップグレードする予定たったのですが、
starter kit のインストールのエラーでハマってできませんでした。
この記事はGatsbyでブログなどを運用していてv4にアップグレードしたいけどエラーでハマってインストールできない方への記事です。
私がどうやってエラーを解決したかをご紹介します。
神守 由理子/フロントエンドエンジニア
資金ゼロからフィリピンで起業したアラフィフ海外ノマドエンジニア。最近は「フィリピンお役立ち情報」「ナチュラルアンチエイジング」「人生から得た哲学」など実体験を発信。最近AIの発達でテックブログはお休みしているけど、IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTechnologies Inc.を設立し、代表を務める。
Gatsby v4がリリース！
当ブログも半年越しにようやくv4にと重い腰をあげることになりました！
Gatsby is a modern web framework for blazing fast websites.
Gatsby 高速なウェブサイトを実現するためのフレームワークです
インストールしようにもコケる。猶予が土日しかなかったので焦りもあって、間違った方法ではありますがなんとかアップグレードにこぎつけました。
Gatsbyブログサイト移行物語（現在12記事）もv4対応しました！
昨年から移行を機に書いている「Gatsbyブログサイト移行物語」もv4対応しました。v4から新たにGatsbyでブログを始めたい人方は「インストールからデプロイまで」からお読みください。
一覧出力、ページネー ション、サムネイルの出力方法など紹介しています。
Gatsby関記事も併せてどうぞ。
アップグレード方法
v4でgatsby starter blog のインストールが走らなかったのは単にnpmのバージョンが低いだけだと発覚し2021/12/12に執筆した記事を大幅に修正しています。
この記事では私の反省も踏まえて、正しい方法をご紹介します。
単純にnpmのバージョンが足りなかったことが発覚
Minimal Node.js version 14.15.0
We are dropping support for Node 12 as a new underlying dependency (lmdb-store) is requiring >=14.15.0. See the main changes in Node 14 release notes.
Migrating from v3 to v4
14.15.0以上じゃないと動きませんとちゃんと公式に書いてあるじゃん。。。
npm7を使う場合は結構面倒で、8が好ましいです。
Homebrewから最新のnodeをダウンロードして、切り替えます。
nodebrew install-binary latest
nodebrew ls使いたいバージョンを選択。
nodebrew use v17.2.0こちらの記事も参考にしました。
macのnodeのバージョンが上がらない!?ブラックボックス化したmacのnode環境を作り直してみる。
補足。上記記事中にはシンボリックを貼る場所は.bashrcとありますが、私の環境下では.bash_profileに設定してあります。人によって環境が違うので気をつけてください。
以下も参考に。
.bashrc|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
インストールされているか確認します（sudoいるかもです）。
npm ls -ggatsby-cli をインストール
バージョンアップ後の nodebrew には gatsby-cli がないので改めてインストールします。
npm i gatsby-cli -gグローバルにインストールされているモジュールを確認。
npm ls -g
おまけ・古いnodeでもモジュールを追加したらgatsbyJSが構築できた
古いnodeでもモジュールを追加したらgatsbyJSが構築できます。
私は最初この方法で対応してしまいましたが、後からnodeをアップグレードすればいいだけと発覚しました。
手順だけ残しておきます。
gatsby cli を v4 用にアップグレードしたもののエラーをもとにググったら、グローバルの node module がいくつか足りないみたい。
sudo npm -g i sharp
sudo npm -g i cordova-resそれでも走らないので、npmのキャッシュを強制的にクリア。
キャッシュで不具合が起きてたのかはちょっと不明です。
npm cache clean --forceこれで走らなければ以下も入れてみてください。
sudo npm install node-addon-api -g
sudo npm i上記を入れた際にもキャッシュクリアしてください。
npm cache clean --forceこれで古いNodeでも走るようになりました。詳しくは調べてませんが、新しいNodeでの不足分のモジュールを入れたから動いたのだろうと思っています。
その後、すでにv4に対応済みの gatsby starter blog を入れてみます。
npx gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blogNetlify にデプロイして動くか確認
このブログは Netlify を使ってます。
別にgithubでリポジトリを立てて、一旦デプロイして動くか確認。
ちゃんと動きました！！
githubとNetlifyの連携の仕方がわからない方はこちらをご覧ください。
まとめ・Gatsby v4 に対応する際、インストール中エラーでコケる前に必須バージョンを確認しよう
仕事が忙しくて放置してたのもありますが、やっと更新できるようになりました！
面倒臭くて公式リファレンスをしっかり読んでなかったのが原因でかえって遠回りしてしまいました汗
Gatsby v4 は超便利になりました。
v2から2世代のアップグレードで参考にならないかもしれませんが、逆にムダなコードをかなり書かなくても済んだり frontmatter の扱いなど変わっています。
今回markdown系の快適機能も追加しました！
以下に方法をまとめてます。
今回も、最後までお読みいただきありがとうございました。
この記事があなたのコーディングライフの一助となれば幸いです。
FAQ
- Gatsby v4/v5 アップグレード時に 'gatsby new' がエラーで失敗します。
原因の多くは Node.jsのバージョン不足 です。v4ならNode 14.15以上、v5ならNode 18以上が必須です。インストール前に
node -vでバージョンを確認し、公式の Minimal Node.js version を満たしているかチェックしてください。npmのバージョンも8以上が推奨されます。
- macOSで Node.js のバージョンを切り替えても反映されない場合は？
nodebrewなどでインストールしても反映されない場合、パス（PATH）の設定が古い可能性があります。
.zshrcや.bash_profileに正しくシンボリックリンクが設定されているか確認しましょう。詳細は macのnode環境を作り直す セクションで解説しています。
- Gatsbyのビルドエラーが解決しない時、まず試すべきことは？
依存関係のキャッシュが原因でエラーが起きることがあります。
gatsby cleanコマンドを実行して.cacheとpublicフォルダを削除し、さらにnpm cache clean --forceでnpm側のキャッシュもクリアしてみてください。本記事の キャッシュクリアの手順 が参考になります。
- NetlifyでGatsby v4以降をデプロイする際の注意点は？
Netlifyの管理画面（Environment variables）で、
NODE_VERSIONをローカル環境と同じバージョン（例: 18）に指定する必要があります。これを忘れるとビルド時にバージョンエラーが発生します。デプロイの基本手順は Netlifyへのデプロイ をご覧ください。