モチベーション

普段はFlutterを中心にコードを書いてますが、案件によってはライブラリの関係上React.jsを利用したWeb開発を行なったりしています。開発機としては最近登場したM1（arm64）のMacを使用していますが、npmライブラリの中ではまだarm64に対応していなライブラリもあり代表的なものがcanvasを利用したパッケージだと思います。
今回の記事は開発の中で以前インストールしたcanvasを利用したパッケージをアップグレードしようとするとHomeBrewでのライブラリインストールが必要になり、その際にx86_64版HomeBrewを利用する事に気づくのに手間取ったので備忘録も兼ねて記述したいと思います。

この記事ではcanvasをインストールする事を例に進めます。

環境

M1 MacbookPro
Mac OS Moterey
node v16.15.0
"canvas": "^2.10.2"
"react": "^18.2.0"

症状

yarn add canvasを実行した際に以下のようなログが出てnode-pre-gyp時に失敗した場合の例です（一部ログ省略）

% arch -arch x86_64 zsh ## x86_64アーキテクチャ実行のzshに切り替え
% uname -m  # 確認
x86_64
% yarn add canvas
yarn upgrade v1.22.18
warning ../package.json: No license field
~~~省力~~~
error /Users/alpha/work/metaprint/node_modules/canvas: Command failed.
Exit code: 1
Command: node-pre-gyp install --fallback-to-build --update-binary
Arguments: 
Directory: /Users/alpha/work/metaprint/node_modules/canvas
Output:
node-pre-gyp info it worked if it ends with ok
node-pre-gyp info using node-pre-gyp@1.0.10

~~~省略~~~

node-pre-gyp ERR! install response status 404 Not Found on 
Package pixman-1 was not found in the pkg-config search path.
Perhaps you should add the directory containing `pixman-1.pc'
to the PKG_CONFIG_PATH environment variable
No package 'pixman-1' found
gyp: Call to 'pkg-config pixman-1 --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.onCpExit (/Users/alpha/work/metaprint/node_modules/node-gyp/lib/configure.js:259:16)
gyp ERR! stack     at ChildProcess.emit (node:events:527:28)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
gyp ERR! System Darwin 21.6.0
gyp ERR! command "/usr/local/bin/node"

以下のように特定のパッケージが無いエラーが発生してインストールが失敗します。この場合はHomeBrewで特定のライブラリをインストール必要があります。引用

No package 'pixman-1' found

通常にbrew installで必要なライブラリをインストールします。今回の場合は

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

しかし上記のように通常にインストールしてもエラーは治りません。またこの症状はcanvasを持ちいるパッケージ入れると必ず発生しました。

原因

今回の行ったbrew installはarm64版HomeBrewのコマンドであるため、x86用のライブラリをインストールすることができなかった事が原因でした。x86_64版HomeBrewを別途インストールして対応する必要があります

対処

x86_64版HomeBrewをインストールして必要なライブラリを揃えます
前提としてはRosettaのインストールが必要です。

x86_64版HomeBrewのインストール

x86_64のzshに切り替えてインストールshを実行します

% arch -arch x86_64 zsh ## x86_64アーキテクチャ実行のzshに切り替え
% uname -m  # 確認
x86_64
% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

参考

x86_64ではarm64版と違いインストール先が以下のように異なるので注意です。そのため同じbrewコマンドででもパスを意識する必要があります。

x86_64: /usr/local/bin/brew
arm64: /opt/homebrew/bin/brew

x86_64のライブラリをHomeBrewでインストール

canvasに必要なx86_64のライブラリをHomeBrewでインストールします

% uname -m  # 確認
x86_64
% /usr/local/bin/brew install pkg-config cairo pango libpng jpeg giflib librsvg

canvasのインストール

最後にcanvasパッケージをyarn addでインストールします

% uname -m  # 確認
x86_64
% yarn add canvas
yarn add v1.22.18
warning ../package.json: No license field
~~省略~~
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ canvas@2.10.2
info All dependencies
└─ canvas@2.10.2
✨  Done in 7.27s.

以上でインストール完了です

通常利用について

canvasパッケージを利用したプログラム開発においてyarn buildやyarn startする際に、いちいちx86_64に切り替える必要はありません。一度インストールしてしまえばarm64で実行可能です。以下は例です

% uname -m  # 確認
arm64
% yarn start
~~問題なく実行可能~~

注意としてはyarn upgrade等した際に同様のエラーがでた時にはx86_64に切り替えて作業する必要があります。

最後に

今回はcanvasでしたがcanvasを使用するパッケージは多くありインストール時には必ず上記問題が発生するこたが間えます。またHomeBrewをarm64/x86_64環境に応じて実行ぱすを変えることも可能で、こちらが参考になると思います。