Gatsby.jsとnpm update

基本的にnpm updateはメジャーバージョンアップを避けるようになっており

こまめにやってもビルドできなくなる可能性は比較的低い（と思う）

しかしながらGatsby.js自体がかなり複雑なプログラムなため公式もバグを把握しきれずリリースすることもあるため

時々だがnpm run devやnpm run buildできなくなってしまう事がある。

npm updateすると動かなくなるときは

まずはGit Hubに挙がってくるGatsby.js公式Issuesを見る。

Issues · gatsbyjs/gatsby

概ねココに自分と同じバグが挙がってきていると思うので対応策を探す。

バグの原因がおおよそ明らかであればGatsby運営の対応は早いので待っても良い。

早く直したい(GitHub版)

GatsbyサイトをGitHubで管理しているのであれば動いていたバージョンへロールバックすれば良い....と思うのだが

そもそもロールバックしてしまうと追加した記事と画像が消えてしまい面倒だ。

部分的にロールバックする方法もあるはずだが...それすら面倒なので私はやってない。

というわけで、サクっともとに戻す方法を紹介する。

node_modulesフォルダを丸ごと削除

最新のパッケージはここにインストールされているので一度フォルダごと削除する。

ファイル数が多く削除に時間がかかる。

VSCodeから削除すると一時的にVSCodeがフリーズするが削除が終わると帰ってくるので気長に。

GitHubのリポジトリからjsonをDL

正常にビルドできた過去のバージョンから次の2つのファイルをDLする

• package.json
• package-lock.json

どこからDLするの？となる場合は

ここから動いていた過去のバージョンを探して

タイトルをクリック

右上に現れるBrowse files

これでファイル一覧が出るので欲しい物をクリックしてソースを表示

そのままコピペしても良いし

RawからDLしても良い。

2つのファイルで上書き

npm updateに失敗したローカルのデータに上の2つのファイルを上書きしてしまう。

npm install

ここでnpm installしてパッケージを全インストール。

完了

念の為gatsby cleanを実行する。これでnpm run buildが走るはず(環境によってはgatsby build)

これで大体動く。

余談：なんでわざわざ記事にした？

package.jsonに関しては「そんなもん知っとるわ」と言われそうだ。

しかし、次のパターンで実行すると結局ビルドエラーになるケースがあり、時々迷うので私個人としても備忘録とした。

• node_modulesを一旦削除しないと上書きinstallしてももとに戻らない(たぶん)
• package-lock.jsonの存在をわすれており、これを元に戻しておらずエラーになる
• npm updateでアップデートされたパッケージだけpackage.jsonの記述で戻してnpm insitallしただけではエラーになる
• etc...

さいごに

新しく追加した記事を削除しないようにもっとサクっともとに戻せる方法があったら教えていただけたらと思う。