I am trying to install the canvas library in my Electron project but have been unable to do so.

Environment Details: Node.js Version: 18.13.0 (using NVM) OS: macOS (ARM64) Electron: (Add Electron version here if relevant)

The installation of the canvas library fails with the error logs below. From what I understand, the issue seems related to missing pre-built binaries for my platform (darwin-unknown-arm64) or a failure in building the library from source using node-gyp.

Error Logs:

npm ERR! path /Users/mukul/Desktop/Coding/work/airdrops-electron/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c -- node-pre-gyp install --fallback-to-build --update-binary
npm ERR! SOLINK_MODULE(target) Release/canvas-postbuild.node
npm ERR!   CXX(target) Release/obj.target/canvas/src/backend/Backend.o
npm ERR! Failed to execute '/Users/mukul/.nvm/versions/node/v18.13.0/bin/node /Users/mukul/.nvm/versions/node/v18.13.0/lib/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --update-binary --module=/Users/mukul/Desktop/Coding/work/airdrops-electron/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/mukul/Desktop/Coding/work/airdrops-electron/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)
npm ERR! node-pre-gyp info it worked if it ends with ok
npm ERR! node-pre-gyp info using [email protected]
npm ERR! node-pre-gyp info using [email protected] | darwin | arm64
npm ERR! node-pre-gyp http GET .11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz
npm ERR! node-pre-gyp ERR! install response status 404 Not Found on .11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz 
npm ERR! 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) 
npm ERR! node-pre-gyp WARN Hit error response status 404 Not Found on .11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info ok 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info find Python using Python version 3.10.16 found at "/Users/mukul/.pyenv/versions/3.10.16/bin/python3"
npm ERR! gyp info spawn /Users/mukul/.pyenv/versions/3.10.16/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/Users/mukul/.nvm/versions/node/v18.13.0/lib/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/mukul/Desktop/Coding/work/airdrops-electron/node_modules/canvas/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/mukul/.nvm/versions/node/v18.13.0/lib/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/mukul/Library/Caches/node-gyp/18.13.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/mukul/Library/Caches/node-gyp/18.13.0',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/Users/mukul/.nvm/versions/node/v18.13.0/lib/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/Users/mukul/Library/Caches/node-gyp/18.13.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/Users/mukul/Desktop/Coding/work/airdrops-electron/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! gyp info ok 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! In file included from ../src/backend/Backend:1:
npm ERR! ../src/backend/Backend.h:5:10: fatal error: 'exception' file not found
npm ERR!     5 | #include <exception>
npm ERR!       |          ^~~~~~~~~~~
npm ERR! 1 error generated.
npm ERR! make: *** [Release/obj.target/canvas/src/backend/Backend.o] Error 1
npm ERR! gyp ERR! build error 
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/Users/mukul/.nvm/versions/node/v18.13.0/lib/node_modules/node-gyp/lib/build.js:203:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
npm ERR! gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:291:12)
npm ERR! gyp ERR! System Darwin 24.0.0
npm ERR! gyp ERR! command "/Users/mukul/.nvm/versions/node/v18.13.0/bin/node" "/Users/mukul/.nvm/versions/node/v18.13.0/lib/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--update-binary" "--module=/Users/mukul/Desktop/Coding/work/airdrops-electron/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/mukul/Desktop/Coding/work/airdrops-electron/node_modules/canvas/build/Release" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v108"
npm ERR! gyp ERR! cwd /Users/mukul/Desktop/Coding/work/airdrops-electron/node_modules/canvas
npm ERR! gyp ERR! node -v v18.13.0
npm ERR! gyp ERR! node-gyp -v v9.4.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/mukul/.nvm/versions/node/v18.13.0/bin/node /Users/mukul/.nvm/versions/node/v18.13.0/lib/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --update-binary --module=/Users/mukul/Desktop/Coding/work/airdrops-electron/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/mukul/Desktop/Coding/work/airdrops-electron/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/mukul/Desktop/Coding/work/airdrops-electron/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1091:16)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! node-pre-gyp ERR! System Darwin 24.0.0
npm ERR! node-pre-gyp ERR! command "/Users/mukul/.nvm/versions/node/v18.13.0/bin/node" "/Users/mukul/Desktop/Coding/work/airdrops-electron/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
npm ERR! node-pre-gyp ERR! cwd /Users/mukul/Desktop/Coding/work/airdrops-electron/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v18.13.0
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.11
npm ERR! node-pre-gyp ERR! not ok```

I've tried several solutions, including the suggestions in this Stack Overflow post (), but nothing has worked so far.

How can I successfully install the canvas library on macOS ARM64 for my Electron project?