はじめに
こんにちは、株式会社コズム開発部の穴澤です。
今回は、Reactのライブラリである、React-Konvaを使用した際にnode-canvasを利用する必要があり、そのビルド時にいくつかエラーに遭遇したのでそのエラー内容と対処方法をまとめました。
TL;DR
node-canvasとは
node-canvasは2Dグラフィックスライブラリであるcairoを用いてNode.jsに実装されているCanvasです。
使用したライブラリ
問題
canvasというnode moduleが見つからないため、インストールしたところビルドに失敗しました。
yarn add canvas
➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Link step
➤ YN0008: │ canvas@npm:2.11.2 must be rebuilt because its dependency tree changed
➤ YN0009: │ canvas@npm:2.11.2 couldn't be built successfully (exit code 1, logs can be found here: /private/var/folders/y0/6l7j3fpj1916jkpgl82nhm7w0000gn/T/xfs-452bc208/build.log)
➤ YN0000: └ Completed in 10s 23ms
➤ YN0000: · Failed with errors in 10s 864ms
解決手順
1. エラーログを見てみる
エラーログ
```bash
# This file contains the result of Yarn building a package (canvas@npm:2.11.2)
# Script name: install
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@21.7.2 | darwin | arm64
(node:3201) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v120-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-v120-darwin-unknown-arm64.tar.gz
node-pre-gyp WARN Pre-built binaries not installable for canvas@2.11.2 and node@21.7.2 (node-v120 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-v120-darwin-unknown-arm64.tar.gz
gyp info it worked if it ends with ok
gyp info using node-gyp@10.1.0
gyp info using node@21.7.2 | darwin | arm64
gyp info ok
gyp info it worked if it ends with ok
gyp info using node-gyp@10.1.0
gyp info using node@21.7.2 | darwin | arm64
gyp info find Python using Python version 3.9.6 found at "/Applications/Xcode.app/Contents/Developer/usr/bin/python3"
gyp info spawn /Applications/Xcode.app/Contents/Developer/usr/bin/python3
gyp info spawn args [
gyp info spawn args '/プロジェクトのパス/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args 'binding.gyp',
gyp info spawn args '-f',
gyp info spawn args 'make',
gyp info spawn args '-I',
gyp info spawn args '/プロジェクトのパス/node_modules/canvas/build/config.gypi',
gyp info spawn args '-I',
gyp info spawn args '/プロジェクトのパス/node_modules/node-gyp/addon.gypi',
gyp info spawn args '-I',
gyp info spawn args '/Users/ユーザー名/Library/Caches/node-gyp/21.7.2/include/node/common.gypi',
gyp info spawn args '-Dlibrary=shared_library',
gyp info spawn args '-Dvisibility=default',
gyp info spawn args '-Dnode_root_dir=/Users/ユーザー名/Library/Caches/node-gyp/21.7.2',
gyp info spawn args '-Dnode_gyp_dir=/プロジェクトのパス/node_modules/node-gyp',
gyp info spawn args '-Dnode_lib_file=/Users/ユーザー名/Library/Caches/node-gyp/21.7.2/<(target_arch)/node.lib',
gyp info spawn args '-Dmodule_root_dir=/プロジェクトのパス/node_modules/canvas',
gyp info spawn args '-Dnode_engine=v8',
gyp info spawn args '--depth=.',
gyp info spawn args '--no-parallel',
gyp info spawn args '--generator-output',
gyp info spawn args 'build',
gyp info spawn args '-Goutput_dir=.'
gyp info spawn args ]
/bin/sh: pkg-config: command not found
gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 127 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.<anonymous> (/プロジェクトのパス/node_modules/node-gyp/lib/configure.js:297:18)
gyp ERR! stack at ChildProcess.emit (node:events:519:28)
gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:294:12)
gyp ERR! System Darwin 23.4.0
gyp ERR! command "/opt/homebrew/Cellar/node/21.7.2/bin/node" "/プロジェクトのパス/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=/プロジェクトのパス/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/プロジェクトのパス/node_modules/canvas/build/Release" "--napi_version=9" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v120"
gyp ERR! cwd /プロジェクトのパス/node_modules/canvas
gyp ERR! node -v v21.7.2
gyp ERR! node-gyp -v v10.1.0
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/opt/homebrew/Cellar/node/21.7.2/bin/node /プロジェクトのパス/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/プロジェクトのパス/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/プロジェクトのパス/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v120' (1)
node-pre-gyp ERR! stack at ChildProcess.<anonymous> (/プロジェクトのパス/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
node-pre-gyp ERR! stack at ChildProcess.emit (node:events:519:28)
node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1105:16)
node-pre-gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:305:5)
node-pre-gyp ERR! System Darwin 23.4.0
node-pre-gyp ERR! command "/opt/homebrew/Cellar/node/21.7.2/bin/node" "/プロジェクトのパス/node_modules/@mapbox/node-pre-gyp/bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
node-pre-gyp ERR! cwd /プロジェクトのパス/node_modules/canvas
node-pre-gyp ERR! node -v v21.7.2
node-pre-gyp ERR! node-pre-gyp -v v1.0.11
node-pre-gyp ERR! not ok
Failed to execute '/opt/homebrew/Cellar/node/21.7.2/bin/node /プロジェクトのパス/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/プロジェクトのパス/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/プロジェクトのパス/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v120' (1)
```
pixman-1が見つからないため呼び出しに失敗していることがわかりました。
pixmanと、念の為pkg-configもインストールします。
brew install pixman pkg-config
しかし、再度canvasをインストールしたものの、またしてもビルドに失敗しました。
2. 再度エラーログを見てみる
エラーログ
```bash
# This file contains the result of Yarn building a package (canvas@npm:2.11.2)
# Script name: install
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@21.7.2 | darwin | arm64
(node:4844) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v120-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-v120-darwin-unknown-arm64.tar.gz
node-pre-gyp WARN Pre-built binaries not installable for canvas@2.11.2 and node@21.7.2 (node-v120 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-v120-darwin-unknown-arm64.tar.gz
gyp info it worked if it ends with ok
gyp info using node-gyp@10.1.0
gyp info using node@21.7.2 | darwin | arm64
gyp info ok
gyp info it worked if it ends with ok
gyp info using node-gyp@10.1.0
gyp info using node@21.7.2 | darwin | arm64
gyp info find Python using Python version 3.9.6 found at "/Applications/Xcode.app/Contents/Developer/usr/bin/python3"
gyp info spawn /Applications/Xcode.app/Contents/Developer/usr/bin/python3
gyp info spawn args [
gyp info spawn args '/プロジェクトのパス/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args 'binding.gyp',
gyp info spawn args '-f',
gyp info spawn args 'make',
gyp info spawn args '-I',
gyp info spawn args '/プロジェクトのパス/node_modules/canvas/build/config.gypi',
gyp info spawn args '-I',
gyp info spawn args '/プロジェクトのパス/node_modules/node-gyp/addon.gypi',
gyp info spawn args '-I',
gyp info spawn args '/Users/ユーザー名/Library/Caches/node-gyp/21.7.2/include/node/common.gypi',
gyp info spawn args '-Dlibrary=shared_library',
gyp info spawn args '-Dvisibility=default',
gyp info spawn args '-Dnode_root_dir=/Users/ユーザー名/Library/Caches/node-gyp/21.7.2',
gyp info spawn args '-Dnode_gyp_dir=/プロジェクトのパス/node_modules/node-gyp',
gyp info spawn args '-Dnode_lib_file=/Users/ユーザー名/Library/Caches/node-gyp/21.7.2/<(target_arch)/node.lib',
gyp info spawn args '-Dmodule_root_dir=/プロジェクトのパス/node_modules/canvas',
gyp info spawn args '-Dnode_engine=v8',
gyp info spawn args '--depth=.',
gyp info spawn args '--no-parallel',
gyp info spawn args '--generator-output',
gyp info spawn args 'build',
gyp info spawn args '-Goutput_dir=.'
gyp info spawn args ]
Package pangocairo was not found in the pkg-config search path.
Perhaps you should add the directory containing `pangocairo.pc'
to the PKG_CONFIG_PATH environment variable
No package 'pangocairo' found
gyp: Call to 'pkg-config pangocairo --libs' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.<anonymous> (/プロジェクトのパス/node_modules/node-gyp/lib/configure.js:297:18)
gyp ERR! stack at ChildProcess.emit (node:events:519:28)
gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:294:12)
gyp ERR! System Darwin 23.4.0
gyp ERR! command "/opt/homebrew/Cellar/node/21.7.2/bin/node" "/プロジェクトのパス/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=/プロジェクトのパス/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/プロジェクトのパス/node_modules/canvas/build/Release" "--napi_version=9" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v120"
gyp ERR! cwd /プロジェクトのパス/node_modules/canvas
gyp ERR! node -v v21.7.2
gyp ERR! node-gyp -v v10.1.0
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/opt/homebrew/Cellar/node/21.7.2/bin/node /プロジェクトのパス/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/プロジェクトのパス/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/プロジェクトのパス/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v120' (1)
node-pre-gyp ERR! stack at ChildProcess.<anonymous> (/プロジェクトのパス/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
node-pre-gyp ERR! stack at ChildProcess.emit (node:events:519:28)
node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1105:16)
node-pre-gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:305:5)
node-pre-gyp ERR! System Darwin 23.4.0
node-pre-gyp ERR! command "/opt/homebrew/Cellar/node/21.7.2/bin/node" "/プロジェクトのパス/node_modules/@mapbox/node-pre-gyp/bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
node-pre-gyp ERR! cwd /プロジェクトのパス/node_modules/canvas
node-pre-gyp ERR! node -v v21.7.2
node-pre-gyp ERR! node-pre-gyp -v v1.0.11
node-pre-gyp ERR! not ok
Failed to execute '/opt/homebrew/Cellar/node/21.7.2/bin/node /プロジェクトのパス/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/プロジェクトのパス/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/プロジェクトのパス/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v120' (1)
```
pangocairoが見つからないことがわかりました。
pango と cairo をインストールします。
brew install pango cairo
3. canvasを再度インストール
yarn add canvas
➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Link step
➤ YN0007: │ canvas@npm:2.11.2 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 20s 558ms
➤ YN0000: · Done with warnings in 21s 430ms yarn add canvas
インストールに成功しました。
おわりに
今回は何も見ずエラーログから解決したのですが、node-canvasの公式GitHubのWikiを閲覧したところOS X (macOS)の場合は
brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman
でインストールすることが推奨されていました。ただし、jpeg、giflib、libsvgのインストールはそれぞれJPEG、GIF、SVGに対応させたい場合のオプショナルであるようです。
結果として、今回の対処は正しくはあったのですが、公式のGithubを閲覧すれば一発だったということもあり、今後は新しいモジュール、ライブラリ等を使用する際には公式のGithub、Docsを閲覧すべきという教訓が得られました。
ちなみに・・・
なぜこれらのパッケージを追加でインストールする必要があるかというと、どうやら私の使用しているPCのプロセッサアーキテクチャによる影響があるようです。
私は普段開発でApple社のM2 MacBook Proを使用しているのですが、このPCに搭載されているCPUであるApple M2 ProのプロセッサアーキテクチャはARM64であり、ARM64アーキテクチャ上でnode-canvasを利用するためにはこれらのパッケージを利用してシステム上でコンパイルする必要があるという理由のようです。（参考）
株式会社コズムは「日本を代表する企業になる」というビジョンを掲げ、製造業をはじめ様々な業界にDX製品・ソリューションを提供し、お客様の課題解決を推進しています。スタートアップとして柔軟性を活かし、迅速な意思決定、先端技術への探求、情熱をもって、社会をクリエイティブな方向へ導くことで、大きなインパクトを与えていきます。
Discussion