Cannot install in Apple M1

[826327700]

npm ERR! code 1
npm ERR! path /Users/xiaobaozi/Documents/developer/node/zichao-node/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-pre-gyp install --fallback-to-build
npm ERR! Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/Users/xiaobaozi/Documents/developer/node/zichao-node/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/xiaobaozi/Documents/developer/node/zichao-node/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 node-pre-gyp@0.11.0
npm ERR! node-pre-gyp info using node@16.4.0 | darwin | arm64
npm ERR! node-pre-gyp WARN Using request for node-pre-gyp https download
npm ERR! node-pre-gyp info check checked for "/Users/xiaobaozi/Documents/developer/node/zichao-node/node_modules/canvas/build/Release/canvas.node" (not found)
npm ERR! node-pre-gyp http GET https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v93-darwin-unknown-arm64.tar.gz
npm ERR! node-pre-gyp http 404 https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v93-darwin-unknown-arm64.tar.gz
npm ERR! node-pre-gyp WARN Tried to download(404): https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v93-darwin-unknown-arm64.tar.gz
npm ERR! node-pre-gyp WARN Pre-built binaries not found for canvas@2.6.1 and node@16.4.0 (node-v93 ABI, unknown) (falling back to source compile with node-gyp)
npm ERR! node-pre-gyp http 404 status code downloading tarball https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v93-darwin-unknown-arm64.tar.gz
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@7.1.2
npm ERR! gyp info using node@16.4.0 | darwin | arm64
npm ERR! gyp info ok
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@7.1.2
npm ERR! gyp info using node@16.4.0 | darwin | arm64
npm ERR! gyp info find Python using Python version 3.9.5 found at "/opt/homebrew/opt/python@3.9/bin/python3.9"
npm ERR! (node:45691) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
npm ERR! (Use node --trace-deprecation ... to show where the warning was created)
npm ERR! gyp info spawn /opt/homebrew/opt/python@3.9/bin/python3.9
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args '/usr/local/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/xiaobaozi/Documents/developer/node/zichao-node/node_modules/canvas/build/config.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/usr/local/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/xiaobaozi/Library/Caches/node-gyp/16.4.0/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/xiaobaozi/Library/Caches/node-gyp/16.4.0',
npm ERR! gyp info spawn args '-Dnode_gyp_dir=/usr/local/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args '-Dnode_lib_file=/Users/xiaobaozi/Library/Caches/node-gyp/16.4.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=/Users/xiaobaozi/Documents/developer/node/zichao-node/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! Package zlib was not found in the pkg-config search path.
npm ERR! Perhaps you should add the directory containing zlib.pc' npm ERR! to the PKG_CONFIG_PATH environment variable npm ERR! Package 'zlib', required by 'libpng', not found npm ERR! gyp: Call to 'pkg-config libpng --libs' returned exit status 1 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 (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:394:28)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Darwin 20.5.0
npm ERR! gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/Users/xiaobaozi/Documents/developer/node/zichao-node/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/xiaobaozi/Documents/developer/node/zichao-node/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/xiaobaozi/Documents/developer/node/zichao-node/node_modules/canvas
npm ERR! gyp ERR! node -v v16.4.0
npm ERR! gyp ERR! node-gyp -v v7.1.2
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 '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/Users/xiaobaozi/Documents/developer/node/zichao-node/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/xiaobaozi/Documents/developer/node/zichao-node/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. (/Users/xiaobaozi/Documents/developer/node/zichao-node/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
npm ERR! node-pre-gyp ERR! stack at ChildProcess.emit (node:events:394:28)
npm ERR! node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1067: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 20.5.0
npm ERR! node-pre-gyp ERR! command "/usr/local/bin/node" "/Users/xiaobaozi/Documents/developer/node/zichao-node/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
npm ERR! node-pre-gyp ERR! cwd /Users/xiaobaozi/Documents/developer/node/zichao-node/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v16.4.0
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v0.11.0
npm ERR! node-pre-gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/xiaobaozi/.npm/_logs/2021-06-30T11_52_49_642Z-debug.log

[foxt]

Did you run this command before attempting to build?

brew install pkg-config cairo pango libpng jpeg giflib librsvg

[ventr1x]

Yes, does not work

[fehergeri13]

I just installed the canvas library on a fresh M1 mac with yarn, and after I installed all the brew packages, it was installing nicely.

[jlucas577]

Im going through the same problem on my mac m1, does anyone know how i can solve it?

[MichaelKaaden]

@theLMGN Thanks, that did the trick!

[Irrelon]

For me, I fixed this by doing what @theLMGN said with brew installs, then in a terminal in my project root:

cd node_modules/canvas
node-pre-gyp install --build-from-source

After that, it all worked.