Front End Programming

Gatsby v4 アップグレード時にハマりました

GatsbyReactJavaScript

お久しぶりです!!!念願の久々更新です。

2021年7月から進めていたウェブサイトのリニューアルがようやく終わりました!涙

WebP対応しつつv3にアップグレードする予定たったのですが、

starter kit のインストールのエラーでハマってできませんでした。

この記事はGatsbyJSでブログなどを運用していてv4にアップグレードしたいけどエラーでハマってインストールできない方への記事です。

私がどうやってエラーを解決したかをご紹介します。

この記事を書いた人

かみーゆ/フロントエンドエンジニア

セブ島在住の気ままな海外ノマドエンジニア。IT業界10年。テクニカルディレクター・エンジニア講師・ブリッジSEを経て今に至る。CMS concrete5エバンジェリスト。テックブログ以外も「磨耗しない人生の選択」や「海外生活」のライフスタイルについて発信。好きなものは肉とビール。

Read More

Gatsby v4がリリース!

Gatsby v4がリリース! Gatsby v4がリリースされましたね!(12日前とあるので2021/12/1リリースかな?)

当ブログも半年越しにようやく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

使いたいバージョンを選択。

Homebrewから使いたいバージョンを選択
コマンド
nodebrew use v17.2.0

こちらの記事も参考にしました。

macのnodeのバージョンが上がらない!?ブラックボックス化したmacのnode環境を作り直してみる。

補足。上記記事中にはシンボリックを貼る場所は.bashrcとありますが、私の環境下では.bash_profileに設定してあります。人によって環境が違うので気をつけてください。
以下も参考に。

.bashrc|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

インストールされているか確認します(sudoいるかもです)。

コマンド
npm ls -g

gatsby-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-blog

Netlify にデプロイして動くか確認

このブログは Netlify を使ってます。

別にgithubでリポジトリを立てて、一旦デプロイして動くか確認。
ちゃんと動きました!!

githubとNetlifyの連携の仕方がわからない方はこちらをご覧ください。

まとめ・Gatsby v4 に対応する際、インストール中エラーでコケる前に必須バージョンを確認しよう

仕事が忙しくて放置してたのもありますが、やっと更新できるようになりました!

面倒臭くて公式リファレンスをしっかり読んでなかったのが原因でかえって遠回りしてしまいました汗

Gatsby v4 は超便利になりました。
v2から2世代のアップグレードで参考にならないかもしれませんが、逆にムダなコードをかなり書かなくても済んだり frontmatter の扱いなど変わっています。

今回markdown系の快適機能も追加しました!
以下に方法をまとめてます。

Gatsbyブログサイト移行物語〜記事内で独自タグ(コンポーネント)を使えるようにする〜

GatsbyJSでは記事はMarkdownで書くのですが、関連記事のカードなどをカッコよく挿入したくなります。以前は無理...

今回も、最後までお読みいただきありがとうございました。
この記事があなたのコーディングライフの一助となれば幸いです。

お読みいただきありがとうございます。
「銀ねこアトリエ」をより良いブログにするために是非応援してください!

銀ねこアトリエを応援する