tl;dr
gatsby-transformer-sharpのバージョンアップでビルドが壊れたが、単純に関連ライブラリのバージョンアップ漏れだった
gatsby のアップグレード
本ブログで使用しているgatsbyは現在v3.14.2。
これを v4 の最新バージョンに上げてみる。
基本的には公式のアップグレードガイドに従えばスムーズにいくと思われる。 Migrating from v3 to v4
関連ライブラリのアップデート
ここが結果的に時間がかかった。。
とりあえずgatsby-*のライブラリを一括で最新バージョンに引き上げてからgatsby developしてみる。
すると下記エラーが発生。
ERROR #98123 WEBPACK
Generating development JavaScript bundle failed
Invalid Options:
- Unknown options: options
File: .cache/blank.css
ERROR #98123 WEBPACK
Generating development JavaScript bundle failed
Invalid Options:
- Unknown options: options
File: src/styles/global.css
ERROR #98123 WEBPACK
Generating development JavaScript bundle failed
Invalid Options:
- Unknown options: options
failed Building development bundle - 27.140s
ERROR in ./.cache/blank.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Invalid Options:
- Unknown options: options
@ ./.cache/app.js 22:0-21
ERROR in ./src/styles/global.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Invalid Options:
- Unknown options: options
@ ./gatsby-browser.js 4:0-33
@ ./.cache/api-runner-browser-plugins.js 15:10-41
@ ./.cache/api-runner-browser.js 4:14-53
@ ./.cache/app.js 9:0-65 26:87-30:1 34:20-29 47:0-14 113:17-26 140:6-15 26:0-30:2
ERROR in Invalid Options:
- Unknown options: optionsエラーログがいまいちピンとこない。。
とりあえず原因切り分けの為一つずつ上げて行ってみることにする。
まずはgatsby-plugin-eslnitを最新版に上げる。
するといきなり上記と同じエラーに。。
しかし公式ページを見るとNow working with Gatsby V3と記載があった。なるほど v4 はまだ未対応なのか。
gatsby-plugin-eslint
とりあえずこの要領で一つずつライブラリの対応状況を見ながらアップデートをかけていく。
gatsby-*のライブラリを一通りバージョンアップしてから再度gatsby develop
Error: Something went wrong installing the "sharp" module
dlopen(/Users/mimuraakito/workspace/mimu-memo/node_modules/gatsby-transformer-sharp/node_modules/sharp/build/Release/sharp-darwin-x64.node, 1
): Library not loaded: @rpath/libvips-cpp.42.dylib
Referenced from: /Users/mimuraakito/workspace/mimu-memo/node_modules/gatsby-transformer-sharp/node_modules/sharp/build/Release/sharp-darwin
-x64.node
Reason: Incompatible library version: sharp-darwin-x64.node requires version 56.0.0 or later, but libvips-cpp.42.dylib provides version 55.
0.0
Possible solutions:
- Update Homebrew: "brew update && brew upgrade vips"
- Consult the installation documentation: https://sharp.pixelplumbing.com/installこんなエラーが出た。
エラーログに従いbrew update && brew upgrade vips実行（20 分ほどかかる）。
しかし同じエラーのまま解消せず。
バージョンの不整合の問題かと思い、とりあえずgatsby-transformer-sharp@^3.0.0で再インストールしてみるがこれでも解消せず。
どうしたものかと少し悩んでいると、公式が出してるトラブルシュートにまさにエラーについての言及がありました。。 Incompatible library version: sharp.node requires version X or later, but Z provides version Y
記載の関連ライブラリを一通り最新化してみる。 すると別のエラーに変わった。
Error: Something went wrong installing the "sharp" module
Cannot find module '../build/Release/sharp-darwin-x64.node'
Require stack:
- /Users/mimuraakito/workspace/mimu-memo/node_modules/sharp/lib/sharp.js
- /Users/mimuraakito/workspace/mimu-memo/node_modules/sharp/lib/constructor.js
- /Users/mimuraakito/workspace/mimu-memo/node_modules/sharp/lib/index.js
- /Users/mimuraakito/workspace/mimu-memo/node_modules/gatsby-plugin-sharp/safe-sharp.js
- /Users/mimuraakito/workspace/mimu-memo/node_modules/gatsby-plugin-sharp/index.js
- /Users/mimuraakito/workspace/mimu-memo/node_modules/gatsby-plugin-sharp/gatsby-node.js
- /Users/mimuraakito/workspace/mimu-memo/node_modules/gatsby/dist/bootstrap/resolve-module-exports.js
- /Users/mimuraakito/workspace/mimu-memo/node_modules/gatsby/dist/bootstrap/load-plugins/validate.js
- /Users/mimuraakito/workspace/mimu-memo/node_modules/gatsby/dist/bootstrap/load-plugins/load.js
- /Users/mimuraakito/workspace/mimu-memo/node_modules/gatsby/dist/bootstrap/load-plugins/index.js
- /Users/mimuraakito/workspace/mimu-memo/node_modules/gatsby/dist/bootstrap/load-config-and-plugins.js
- /Users/mimuraakito/workspace/mimu-memo/node_modules/gatsby/dist/services/initialize.js
- /Users/mimuraakito/workspace/mimu-memo/node_modules/gatsby/dist/services/index.js
- /Users/mimuraakito/workspace/mimu-memo/node_modules/gatsby/dist/state-machines/develop/services.js
- /Users/mimuraakito/workspace/mimu-memo/node_modules/gatsby/dist/state-machines/develop/index.js
- /Users/mimuraakito/workspace/mimu-memo/node_modules/gatsby/dist/commands/develop-process.js
- /Users/mimuraakito/workspace/mimu-memo/.cache/tmp-83698-8Nwdv8plKRNf
Possible solutions:
- Install with the --verbose flag and look for errors: "npm install --ignore-scripts=false --verbose sharp"
- Install for the current runtime: "npm install --platform=darwin --arch=x64 sharp"
- Consult the installation documentation: https://sharp.pixelplumbing.com/installこちらはnode_modules/を削除してからyarn installすると解消。
これで一旦ビルドは通るようになったので後はデグレ確認を進めていく。。
ちなみに v3 でのgatsby developが 15s 程度だったのが v4 にしてから 30s 程かかるようになっていた。
最適化すればもっと早くなるはずなので今後の課題。。