【Gatsby.js】npm updateした時にGatsby.jsがビルドできなくなったらやること

July 22, 2020

Gatsby.jsは色々複雑なので気軽にnpm updateしているとビルドできなくなることがよくある。もとに戻す私の手順を記す。

gatsby_npm_update_shippai

Gatsby.jsnpm update

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

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

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

時々だがnpm run devnpm 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するの?となる場合は

image-20200722123906796

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

image-20200722124012542

タイトルをクリック

image-20200722124039294

右上に現れるBrowse files

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

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

image-20200722124322805

RawからDLしても良い。

2つのファイルで上書き

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

npm install

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

完了

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

これで大体動く。

image-20200722124640398

余談:なんでわざわざ記事にした?

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

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

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

さいごに

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

この記事をシェア:

author icon

仮想トイレ @CrypticToilet
プログラミングや仮想通貨のシステムトレードに関する情報を更新中!どんな情報を流しても詰まらないトイレ。