mac OS 14 => Cant install despite all other issues and installation guide

[ohabash]

I did read the installation guide. I followed all advices and still have problems

npm i canvas has errors
canvas-install.txt

Your Environment

{
  'fornida-services-nx': '0.0.1',
  npm: '8.19.3',
  node: '18.13.0',
  v8: '10.2.154.23-node.21',
  uv: '1.44.2',
  zlib: '1.2.13',
  brotli: '1.0.9',
  ares: '1.18.1',
  modules: '108',
  nghttp2: '1.51.0',
  napi: '8',
  llhttp: '6.0.10',
  uvwasi: '0.0.13',
  openssl: '3.0.7+quic',
  cldr: '42.0',
  icu: '72.1',
  tz: '2022f',
  unicode: '15.0',
  ngtcp2: '0.8.1',
  nghttp3: '0.7.0'
}

[TrevorSayre]

I'm able to install on maOS 14.4.1 with an Apple Silicon chipset:

brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman python@3.12

rm -rf node_modules

npm install

If you don't have the brew command from homebrew: https://brew.sh

[stevenpetryk]

Using homebrew to install unpinned versions of dependencies to get a node package's build script to succeed doesn't feel right. This package should distribute a prebuilt binary for both Mac architectures, but GitHub charges money for Apple Silicon GitHub Actions runners (the free tier is Intel).

Edit: not a huge improvement, but here's a nix shell definition that can also build canvas:

# shell.nix
{ system ? builtins.currentSystem, pkgs ? import <nixpkgs> { inherit system; } }:
  pkgs.mkShell {
    nativeBuildInputs = with pkgs.buildPackages; [ pkg-config cairo pango libpng libjpeg giflib librsvg pixman darwin.apple_sdk.frameworks.Foundation ];
}

Invoke using:

nix-shell shell.nix --argstr system aarch64-darwin
npm run install

[InvisiBug]

I'm able to install on maOS 14.4.1 with an Apple Silicon chipset:

brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman python@3.12

rm -rf node_modules

npm install

If you don't have the brew command from homebrew: https://brew.sh

I needed to run the command pip3 install setuptools after brew.
Everything is working fine after that

[Lepisma07]

I've the same problem and I tried everything, and nothing solved it
Error message:

npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm ERR! code 1
npm ERR! path /Users/isma/Tmp/Torrust/torrust-index-gui/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-pre-gyp install --fallback-to-build --update-binary
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 --update-binary --module=/Users/isma/Tmp/Torrust/torrust-index-gui/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/isma/Tmp/Torrust/torrust-index-gui/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v115' (1)
npm ERR! node-pre-gyp info it worked if it ends with ok
npm ERR! node-pre-gyp info using node-pre-gyp@1.0.11
npm ERR! node-pre-gyp info using node@20.12.2 | darwin | arm64
npm ERR! node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v115-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.11.2/canvas-v2.11.2-node-v115-darwin-unknown-arm64.tar.gz 
npm ERR! node-pre-gyp WARN Pre-built binaries not installable for canvas@2.11.2 and node@20.12.2 (node-v115 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.11.2/canvas-v2.11.2-node-v115-darwin-unknown-arm64.tar.gz 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@10.0.1
npm ERR! gyp info using node@20.12.2 | 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@10.0.1
npm ERR! gyp info using node@20.12.2 | darwin | arm64
npm ERR! gyp info find Python using Python version 3.9.6 found at "/Library/Developer/CommandLineTools/usr/bin/python3"
npm ERR! gyp info spawn /Library/Developer/CommandLineTools/usr/bin/python3
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/isma/Tmp/Torrust/torrust-index-gui/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/isma/Library/Caches/node-gyp/20.12.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/isma/Library/Caches/node-gyp/20.12.2',
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/isma/Library/Caches/node-gyp/20.12.2/<(target_arch)/node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=/Users/isma/Tmp/Torrust/torrust-index-gui/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.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:271:18)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:518:28)
npm ERR! gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:294:12)
npm ERR! gyp ERR! System Darwin 23.4.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" "--update-binary" "--module=/Users/isma/Tmp/Torrust/torrust-index-gui/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/isma/Tmp/Torrust/torrust-index-gui/node_modules/canvas/build/Release" "--napi_version=9" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v115"
npm ERR! gyp ERR! cwd /Users/isma/Tmp/Torrust/torrust-index-gui/node_modules/canvas
npm ERR! gyp ERR! node -v v20.12.2
npm ERR! gyp ERR! node-gyp -v v10.0.1
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 --update-binary --module=/Users/isma/Tmp/Torrust/torrust-index-gui/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/isma/Tmp/Torrust/torrust-index-gui/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v115' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/isma/Tmp/Torrust/torrust-index-gui/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:518:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1105:16)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:305:5)
npm ERR! node-pre-gyp ERR! System Darwin 23.4.0
npm ERR! node-pre-gyp ERR! command "/usr/local/bin/node" "/Users/isma/Tmp/Torrust/torrust-index-gui/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
npm ERR! node-pre-gyp ERR! cwd /Users/isma/Tmp/Torrust/torrust-index-gui/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v20.12.2
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.11
npm ERR! node-pre-gyp ERR! not ok

npm ERR! A complete log of this run can be found in: /Users/isma/.npm/_logs/2024-04-17T15_22_31_848Z-debug-0.log

[stevenpetryk]

If folks come in here continuing to "same" this issue without providing indications of what exactly they ran (not just "I tried everything!") I don't think things are going to get very far. @InvisiBug your error message indicates that you don't have pkg-config in your PATH, so it doesn't look like you followed the installation instructions.

[peckz]

It just stopped working for me today, node 18.12.1 - MacOS 4.4.1 (23E224) - M1

I can confirm that pip3 install setuptools solved the issue.
I already had necessary dependencies installed via brew

I needed to run the command pip3 install setuptools after brew.
Everything is working fine after that

[MeirP-3]

MacOS Sonoma 14.5 failed npm install canvas.

After digging in the error log, root cause were errors similar to error <cstddef> tried including <stddef.h> but didn't find libc++'s <stddef.h> header..

Solution was:

export SDKROOT=$(xcrun --show-sdk-path)
npm install canvas

[mengxi-ream]

For me, the solution is to switch from python@3.12 to python@3.11, then export npm_config_python=/opt/homebrew/bin/python3.11

You can save this export npm_config_python=/opt/homebrew/bin/python3.11 to .bashrc or .zshrc to make it works automatically in the future

[dylanvu]

I was helping someone debug another canvas installation issue, and landed here.

In case there's any lost people...

Turns out, they did not have XCode installed. We figured this out by running npm install canvas --verbose and it showed that xcrun: error: unable to load libxcrun.

We fixed this by installed XCode.