gan0803.dev

GatsbyJSとテーマのアップデート

公開日: 2021年08月16日最終更新日: 2022年01月28日

久しぶりに記事を書こうと思ったらGatsbyJSのバージョンが上がっていたので更新しました。 メジャーバージョンが上がっているとは。

GatsbyJSの公式ドキュメント（Migrating from v2 to v3）の通りに進めればすんなりとアップデートができました。ちゃんとドキュメントが整備されていてありがたいです。

GatsbyJSおよび関連パッケージのアップデート

gatsbyのパッケージと関連するパッケージをアップデートします。

npm install gatsby@latest
npm outdated
ncu -u --packageFile package.json
npm install

npm-check-updatesを使ってパッケージのアップデートとpackage.jsonの更新を行っています。 ncuは以下のコマンドでインストールします。

npm install -g npm-check-updates

npmのアップデート

ここでnpmも最新にしておきます。

npm install -g npmが失敗したので、Resolving EACCES permissions errors when installing packages globallyの手順通りに以下を実行しました。

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH
source ~/.profile

再度アップデートを実行します。今度は無事完了しました。

npm install -g npm

Node.jsのアップデート

Node.jsのバージョンも更新する必要がありました。Upgrading Your Node.js Versionを見ながらすすめます。

NVMのリポジトリのREADMEにある通り、以下を実行します。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

ここで一度Shellを再起動します。

GatsbyJSのドキュメントの記載ではバージョン12が必要なため、以下のコマンドでインストールします。

nvm install 12
nvm alias default 12

Gatsby CLIのアップデート

gaysby-cliもアップデートしておきます。

npm i -g gatsby-cli

テーマのアップデート

テーマがGatsby v3に対応してくれていたため、バージョンアップに合わせて不必要になったカスタマイズ（Shadowing）を取り除いただけで、ほとんどパッケージのアップデートだけで済みました（ありがとうございます）。
Hero Areaのコンポーネントが細かく分けられていてShadowingしやすいです。テーマのメリットを享受しやすく、使いやすいようにとの配慮が素晴らしいです。

netlifyのNode.jsバージョン指定

netlifyでビルドしたときにNode.jsのバージョンが古く、エラーになりました。

Manage build dependencies - Node.js and JavaScriptにNode.jsのバージョン指定方法についての記載があります。

rootディレクトリに.nvmrcを追加します。

node -v > .nvmrc

.nvmrcの内容はバージョンのテキストだけです。

v12.22.5
Tags: GatsbyJS
©︎2021 gan0803.dev