💻

M1 Macでnpm installが失敗する場合の解決法 for Modenizr

2022/09/06に公開

Docker

私はbackground-imageなどの画像のWebp対応のために、ブラウザがWebp対応かを判別するModenizrというパッケージを利用しています

Modenizrをビルドするためにリポジトリをクローンしたのですが、Node.jsとnpmのバージョンは問題ないのにも関わらず、npm installが失敗する事象に遭遇しました

その解決法に関してメモしておきます

Our Website is outdated and broken, please DO NOT use it (https://modernizr.com) but rather build your modernizr version from npm.

https://github.com/Modernizr/Modernizr

原因

npm installした時のエラーを見たら大体察しがつくのですが、内部依存しているパッケージのpuppeteerのバージョンが古いのが原因です

puppeteerは、ChromeまたはChromiumのブラウザをヘッドレス操作できるライブラリなのですが、それがDockerでも内部的に利用しているのか、arm64非対応のChromiumのバイナリを呼び出そうとして、エラーが発生しているようです

volta install node@16.17.0 npm@8.15.0

npm install

npm ERR! code 1
npm ERR! path /Users/xxx/modernizr/node_modules/puppeteer
npm ERR! command failed
npm ERR! command sh /var/folders/jn/06v19hd14n55vcd1203klmw80000gn/T/install-00ea8f05.sh
npm ERR! The chromium binary is not available for arm64: 
npm ERR! If you are on Ubuntu, you can install with: 
npm ERR! 
npm ERR!  apt-get install chromium-browser
npm ERR! 
npm ERR! /Users/xxx/modernizr/node_modules/puppeteer/lib/BrowserFetcher.js:112
npm ERR!             throw new Error();
npm ERR!             ^
npm ERR! 
npm ERR! Error
npm ERR!     at /Users/xxx/modernizr/node_modules/puppeteer/lib/BrowserFetcher.js:112:19
npm ERR!     at FSReqCallback.oncomplete (node:fs:206:21)

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxx/.npm/_logs/2022-09-06T10_07_59_922Z-debug-0.log modernizr %npm i mocha-headless-chrome
npm ERR! code 1
npm ERR! path /Users/xxx/modernizr/node_modules/puppeteer
npm ERR! command failed
npm ERR! command sh /var/folders/jn/06v19hd14n55vcd1203klmw80000gn/T/install-4dc1219d.sh
npm ERR! The chromium binary is not available for arm64: 
npm ERR! If you are on Ubuntu, you can install with: 
npm ERR! 
npm ERR!  apt-get install chromium-browser
npm ERR! 
npm ERR! /Users/xxx/modernizr/node_modules/puppeteer/lib/BrowserFetcher.js:112
npm ERR!             throw new Error();
npm ERR!             ^
npm ERR! 
npm ERR! Error
npm ERR!     at /Users/xxx/modernizr/node_modules/puppeteer/lib/BrowserFetcher.js:112:19
npm ERR!     at FSReqCallback.oncomplete (node:fs:206:21)
...

解決策

puppeteerに内部依存しているmocha-headless-chromeのパッケージのバージョンを上げれば、puppeteerのバージョンも上がるので、解決します

所感

npm install時に処理が走るライブラリがあるとこういうこともあるのかと学びになりました
Dockerなどエミュレーター系の処理を内部的に使っているライブラリがあるような状況でしか遭遇しない稀なケースだと思いますが、参考になれば幸いです

今回の問題は修正のプルリクを上げておきました

Discussion

ログインするとコメントできます