次のようなエラーが出ていた。エラーをよく見ると、事前にビルドされたnode-canvasのバイナリの取得に失敗したため、手元でビルドするようにフォールバックしたが、ビルドにも失敗していることが分かる。

> yarn upgrade react -latest
[1/3] ⠠ canvas
[-/3] ⠠ waiting...
warning Error running install script for optional dependency: "/Users/.../node_modules/canvas: Command failed.
Exit code: 1
Command: node-pre-gyp install --fallback-to-build --update-binary
...
Output:
node-pre-gyp info it worked if it ends with ok
node-pre-gyp info using node-pre-gyp@1.0.11
node-pre-gyp info using node@18.19.0 | darwin | arm64
node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz
node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz
node-pre-gyp WARN Pre-built binaries not installable for canvas@2.11.2 and node@18.19.0 (node-v108 ABI, unknown) (falling back to source compile with node-gyp)
node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz
...
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/Users/.../node
/Users/.../node-gyp.js configure --fallback-to-build --update-binary
--module=/Users/.../canvas/build/Release/canvas.node --module_name=canvas
--module_path=/Users/.../canvas/build/Release --napi_version=9
--node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)

node-canvasとは、Web Canvas API互換なAPIをNode.jsで利用するされるnpmパッケージで、jsdomなど様々なライブラリで利用されている。これはネイティブモジュールに依存しており、

自己完結型のバイナリが配布されているが、darwin-arm64環境のものは不可能らしく配布されていないため、手元でビルドして上げる必要がある。

https://github.com/Automattic/node-canvas/issues/2036

node-canvasのREADMEにあるコマンドを実行して、手元でコンパイルできるようにする。

今回の環境はmacOSであったため、次のコマンドを実行して解決した。

brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman

https://github.com/Automattic/node-canvas?tab=readme-ov-file#compiling