Compatibility Issue with Mac Version 14.4.1 Due to Canva Dependency Error in torrust-index-gui

[Lepisma07]

Issue Description:
The torrust-index-gui application is encountering compatibility issues on Mac systems running version 14.4.1. This problem arises from a dependency error related to Canva, causing the application to malfunction and not work as intended.

Affected Platform:
Mac OS version 14.4.1

Error Details:

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 http GET 
https://nodejs.org/download/release/v20.12.2/node-v20.12.2-headers.tar.gz
npm ERR! gyp http 200 
https://nodejs.org/download/release/v20.12.2/node-v20.12.2-headers.tar.gz
npm ERR! gyp http GET 
https://nodejs.org/download/release/v20.12.2/SHASUMS256.txt
npm ERR! gyp http 200 
https://nodejs.org/download/release/v20.12.2/SHASUMS256.txt
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-17T14_37_35_325Z-debug-0.log

[josecelano]

I added the canvas dependency in this PR.

It seems the dependency needs some system dependencies:

See https://www.npmjs.com/package/canvas

There is an open issue:

• mac OS 14 => Cant install despite all other issues and installation guide Automattic/node-canvas#2372

@Lepisma07 did you tried this:

Mac OS X v10.11+: If you have recently updated to Mac OS X v10.11+ and are experiencing trouble when compiling, run the following command: xcode-select --install. Read more about the problem on Stack Overflow. If you have xcode 10.0 or higher installed, in order to build from source you need NPM 6.4.1 or higher.

We can wait a little bit to see if the issue is solved. Alternatively, we could:

1. Find a different package.
2. Implement a simpler solution that does not require generating an image on the fly.

I used that package because I wanted to include the location of the image as text in the image itself. Maybe we don't need that. We could simply return a static "broken image" image like browsers do.