Error installing dependencies

[ziyuan-linn]

I am trying to run the yarn command to install the dependencies but got this error.

error /Users/ziyuanlin/Documents/VS Code/ml5-next-gen/node_modules/canvas: Command failed.
Exit code: 1
Command: node-pre-gyp install --fallback-to-build --update-binary
Arguments: 
Directory: /Users/ziyuanlin/Documents/VS Code/ml5-next-gen/node_modules/canvas
Output:
node-pre-gyp info it worked if it ends with ok
node-pre-gyp info using [email protected]
node-pre-gyp info using [email protected] | darwin | arm64
node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-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-v108-darwin-unknown-arm64.tar.gz 
node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v108 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-v108-darwin-unknown-arm64.tar.gz 
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | darwin | arm64
gyp info ok 
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | darwin | arm64
gyp info find Python using Python version 3.9.6 found at "/Library/Developer/CommandLineTools/usr/bin/python3"
gyp info spawn /Library/Developer/CommandLineTools/usr/bin/python3
gyp info spawn args [
gyp info spawn args   '/Users/ziyuanlin/.nvm/versions/node/v18.15.0/lib/node_modules/npm/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   '/Users/ziyuanlin/Documents/VS Code/ml5-next-gen/node_modules/canvas/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/ziyuanlin/.nvm/versions/node/v18.15.0/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/ziyuanlin/Library/Caches/node-gyp/18.15.0/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/ziyuanlin/Library/Caches/node-gyp/18.15.0',
gyp info spawn args   '-Dnode_gyp_dir=/Users/ziyuanlin/.nvm/versions/node/v18.15.0/lib/node_modules/npm/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/Users/ziyuanlin/Library/Caches/node-gyp/18.15.0/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/Users/ziyuanlin/Documents/VS Code/ml5-next-gen/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.onCpExit (/Users/ziyuanlin/.nvm/versions/node/v18.15.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:325:16)
gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:291:12)
gyp ERR! System Darwin 23.3.0
gyp ERR! command "/Users/ziyuanlin/.nvm/versions/node/v18.15.0/bin/node" "/Users/ziyuanlin/.nvm/versions/node/v18.15.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=/Users/ziyuanlin/Documents/VS Code/ml5-next-gen/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/ziyuanlin/Documents/VS Code/ml5-next-gen/node_modules/canvas/build/Release" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v108"
gyp ERR! cwd /Users/ziyuanlin/Documents/VS Code/ml5-next-gen/node_modules/canvas
gyp ERR! node -v v18.15.0
gyp ERR! node-gyp -v v9.3.1
gyp ERR! not ok 
node-pre-gyp ERR! build error 
node-pre-gyp ERR! stack Error: Failed to execute '/Users/ziyuanlin/.nvm/versions/node/v18.15.0/bin/node /Users/ziyuanlin/.nvm/versions/node/v18.15.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/ziyuanlin/Documents/VS Code/ml5-next-gen/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/ziyuanlin/Documents/VS Code/ml5-next-gen/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/ziyuanlin/Documents/VS Code/ml5-next-gen/node_modules/canvas/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1091:16)
node-pre-gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:302:5)
node-pre-gyp ERR! System Darwin 23.3.0
node-pre-gyp ERR! command "/Users/ziyuanlin/.nvm/versions/node/v18.15.0/bin/node" "/Users/ziyuanlin/Documents/VS Code/ml5-next-gen/node_modules/canvas/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
node-pre-gyp ERR! cwd /Users/ziyuanlin/Documents/VS Code/ml5-next-gen/node_modules/canvas
node-pre-gyp ERR! node -v v18.15.0
node-pre-gyp ERR! node-pre-gyp -v v1.0.11
node-pre-gyp ERR! not ok 
Failed to execute '/Users/ziyuanlin/.nvm/versions/node/v18.15.0/bin/node /Users/ziyuanlin/.nvm/versions/node/v18.15.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/ziyuanlin/Documents/VS Code/ml5-next-gen/node_modules/canvas/build/Rel

It only appears on my M1 MacBook with macOS 14.3 and not on my Windows machine. The error disappeared when I reverted the changes of #82.

[OrpheasK]

Got the same error on a MacBook M1 running 13.5.2 while bringing in the current package.json to update an older branch. Took out the canvas dependency and it seems to be what is causing the issue, maybe a MacOS incompatibility? Examples can still run through yarn start unaffected.

[lindapaiste]

Well this seems like a real nightmare.
Automattic/node-canvas#1733 (comment)
https://github.com/Automattic/node-canvas?tab=readme-ov-file#installation
Automattic/node-canvas#2186

The canvas package is used as a polyfill for running tests in jest-dom which involve <canvas> elements. Maybe there is a better alternative.

[ziyuan-linn]

I tried a few things in those threads but none seems to work for me. Though someone did mention an alternative that supports both Intel and ARM chips: https://www.npmjs.com/package/@napi-rs/canvas.

[shiffman]

Ah, I've actually worked quite a bit with node-canvas and have all the proper dependencies on my machine installed and have no issues running yarn. I could imagine this being a roadblock for others and I agree it would be good to remove this dependency! I believe I installed the required dependencies with brew using the command here:

https://github.com/Automattic/node-canvas/wiki/Installation:-Mac-OS-X

@lindapaiste is there a way to temporarily remove the tests that require this and revisit later or will that cause other problems?

[lindapaiste]

@shiffman I'll take a look.

[lindapaiste]

Without this package we cannot run end-to-end tests where we provide the model with an actual image and check that we got the correct result. So that's a bummer. But....even with this package I was still running into a lot of other problems with using browser code in Node. I think that our long term plan might be that we do certain end-to-end tests in a browser environment instead of trying to polyfill everything. We would use Jest for unit tests of specific logic.

The bodypose tests will fail when removing canvas. The handpose tests already fail so no loss there. The tests for handleOptions are fine as that does not involve any image processing.

[shiffman]

This makes sense to me, @lindapaiste what do you think about pulling out the canvas tests for now from jest and then incorporating browser-based tests a different way separately?