When I run this command in MacBook Pro M1 to install canvas:
npm install --save-dev canvas
shows error:
npm ERR! code 1 npm ERR! path /Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas npm ERR! command failed npm ERR! command sh -c node-pre-gyp install --fallback-to-build npm ERR! Failed to execute '/Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/bin/node /Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1) npm ERR! node-pre-gyp info it worked if it ends with ok npm ERR! node-pre-gyp info using <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e48a8b8081c9949681c9839d94a4d5cad4cadc">[email protected]</a> npm ERR! node-pre-gyp info using <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f698999293b6c7c0d8c7c5d8c4">[email protected]</a> | darwin | arm64 npm ERR! node-pre-gyp info check checked for "/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas/build/Release/canvas.node" (not found) npm ERR! node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.9.0/canvas-v2.9.0-node-v93-darwin-unknown-arm64.tar.gz npm ERR! node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.9.0/canvas-v2.9.0-node-v93-darwin-unknown-arm64.tar.gz npm ERR! node-pre-gyp WARN Pre-built binaries not installable for <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3053515e46514370021e091e00">[email protected]</a> and <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="016f6e65644130372f30322f33">[email protected]</a> (node-v93 ABI, unknown) (falling back to source compile with node-gyp) npm ERR! node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.9.0/canvas-v2.9.0-node-v93-darwin-unknown-arm64.tar.gz npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ee0e1eaeba3e9f7feceb6a0bda0be">[email protected]</a> npm ERR! gyp info using <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16787972735627203827253824">[email protected]</a> | darwin | arm64 npm ERR! gyp info ok npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d23222928602a343d0d75637e637d">[email protected]</a> npm ERR! gyp info using <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d131219183d4c4b534c4e534f">[email protected]</a> | darwin | arm64 npm ERR! gyp info find Python using Python version 3.10.1 found at "/Library/Frameworks/Python.framework/Versions/3.10/bin/python3" npm ERR! gyp info spawn /Library/Frameworks/Python.framework/Versions/3.10/bin/python3 npm ERR! gyp info spawn args [ npm ERR! gyp info spawn args '/Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py', npm ERR! gyp info spawn args 'binding.gyp', npm ERR! gyp info spawn args '-f', npm ERR! gyp info spawn args 'make', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas/build/config.gypi', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp/addon.gypi', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/Users/xiaoqiangjiang/Library/Caches/node-gyp/16.13.2/include/node/common.gypi', npm ERR! gyp info spawn args '-Dlibrary=shared_library', npm ERR! gyp info spawn args '-Dvisibility=default', npm ERR! gyp info spawn args '-Dnode_root_dir=/Users/xiaoqiangjiang/Library/Caches/node-gyp/16.13.2', npm ERR! gyp info spawn args '-Dnode_gyp_dir=/Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp', npm ERR! gyp info spawn args '-Dnode_lib_file=/Users/xiaoqiangjiang/Library/Caches/node-gyp/16.13.2/<(target_arch)/node.lib', npm ERR! gyp info spawn args '-Dmodule_root_dir=/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas', npm ERR! gyp info spawn args '-Dnode_engine=v8', npm ERR! gyp info spawn args '--depth=.', npm ERR! gyp info spawn args '--no-parallel', npm ERR! gyp info spawn args '--generator-output', npm ERR! gyp info spawn args 'build', npm ERR! gyp info spawn args '-Goutput_dir=.' npm ERR! gyp info spawn args ] npm ERR! /bin/sh: pkg-config: command not found npm ERR! gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 127 while in binding.gyp. while trying to load binding.gyp npm ERR! gyp ERR! configure error npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1 npm ERR! gyp ERR! stack at ChildProcess.onCpExit (/Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:261:16) npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:390:28) npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12) npm ERR! gyp ERR! System Darwin 21.3.0 npm ERR! gyp ERR! command "/Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/bin/node" "/Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas/build/Release" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v93" npm ERR! gyp ERR! cwd /Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas npm ERR! gyp ERR! node -v v16.13.2 npm ERR! gyp ERR! node-gyp -v v8.3.0 npm ERR! gyp ERR! not ok npm ERR! node-pre-gyp ERR! build error npm ERR! node-pre-gyp ERR! stack Error: Failed to execute '/Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/bin/node /Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1) npm ERR! node-pre-gyp ERR! stack at ChildProcess.<anonymous> (/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23) npm ERR! node-pre-gyp ERR! stack at ChildProcess.emit (node:events:390:28) npm ERR! node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1064:16) npm ERR! node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5) npm ERR! node-pre-gyp ERR! System Darwin 21.3.0 npm ERR! node-pre-gyp ERR! command "/Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/bin/node" "/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" npm ERR! node-pre-gyp ERR! cwd /Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas npm ERR! node-pre-gyp ERR! node -v v16.13.2 npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.8 npm ERR! node-pre-gyp ERR! not ok
does anyone facing the same problem. what should I to to fix it or avoid this problem? The node version is 16.x. I have already tried to install pkgconfig like this:
brew install pkgconfig
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
I finally found before install cavas in macOS, we need to install some dependencies using brew like this:
brew install pkg-config cairo pango libpng jpeg giflib librsvg
then run the install command again will success. more info from the official document: https://github.com/Automattic/node-canvas
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0