DevDeps: Direct and indirect reliance on `canvas` module fails on ARM / Apple M1

[voxpelli]

Prerequisites

• Checked that your issue hasn't already been filed by cross-referencing issues with the faq label
• Checked next-gen ES issues and syntax problems by using the same environment and/or transpiler configuration without Mocha to ensure it isn't just a feature that actually isn't supported in the environment in question or a bug in your code.
• 'Smoke tested' the code to be tested by running it outside the real test suite to get a better sense of whether the problem is in the code under test, your usage of Mocha, or Mocha itself
• Ensured that there is no discrepancy between the locally and globally installed versions of Mocha. You can find them with: node node_modules/.bin/mocha --version(Local) and mocha --version(Global). We recommend that you not install Mocha globally.

Description

The canvas module doesn't install natively on an ARM computer (see eg. Automattic/node-canvas#1733) making it hard to contribute to this project when on eg. an Apple M1.

Previously a replacement was suggested in #4757 but it was there pointed out that canvas is also an indirect dependency due to assetgraph-builder.

When preparing a PR right now for another issue this caused me issues in installing the dev dependencies and to thus run the test suites, but when I removed those two dependencies as a temporary local workaround for me, then I could get it installing.

Steps to Reproduce

Expected behavior: a local npm install in the mocha project works on an ARM-based computers

Actual behavior: a local npm install in the mocha project fails on my MacBook Air M1

It fails due to there existing no prebuilt binary for arm64, the following URL returns 404: https://github.com/Automattic/node-canvas/releases/download/v2.9.0/canvas-v2.9.0-node-v93-darwin-unknown-arm64.tar.gz

Actual error:

See the full error log here

npm ERR! code 1
npm ERR! path /Users/pelle/Sites/smallrepos/mocha/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-pre-gyp install --fallback-to-build
npm ERR! Failed to execute '/Users/pelle/.nvm/versions/node/v16.13.2/bin/node /Users/pelle/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/Users/pelle/Sites/smallrepos/mocha/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/pelle/Sites/smallrepos/mocha/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@1.0.8
npm ERR! node-pre-gyp info using node@16.13.2 | darwin | arm64
npm ERR! node-pre-gyp info check checked for "/Users/pelle/Sites/smallrepos/mocha/node_modules/canvas/build/Release/canvas.node" (not found)
npm ERR! node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.9.0/canvas-v2.9.0-node-v93-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.9.0/canvas-v2.9.0-node-v93-darwin-unknown-arm64.tar.gz 
npm ERR! node-pre-gyp WARN Pre-built binaries not installable for canvas@2.9.0 and node@16.13.2 (node-v93 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.9.0/canvas-v2.9.0-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@8.4.1
npm ERR! gyp info using node@16.13.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@8.4.1
npm ERR! gyp info using node@16.13.2 | darwin | arm64
npm ERR! gyp info find Python using Python version 3.9.9 found at "/opt/homebrew/opt/python@3.9/bin/python3.9"
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   '/Users/pelle/.nvm/versions/node/v16.13.2/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/pelle/Sites/smallrepos/mocha/node_modules/canvas/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/pelle/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/pelle/Library/Caches/node-gyp/16.13.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/pelle/Library/Caches/node-gyp/16.13.2',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/Users/pelle/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/Users/pelle/Library/Caches/node-gyp/16.13.2/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/Users/pelle/Sites/smallrepos/mocha/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 cairo was not found in the pkg-config search path.
npm ERR! Perhaps you should add the directory containing `cairo.pc'
npm ERR! to the PKG_CONFIG_PATH environment variable
npm ERR! No package 'cairo' found
npm ERR! gyp: Call to 'pkg-config cairo --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 (/Users/pelle/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:259:16)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Darwin 21.3.0
npm ERR! gyp ERR! command "/Users/pelle/.nvm/versions/node/v16.13.2/bin/node" "/Users/pelle/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/Users/pelle/Sites/smallrepos/mocha/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/pelle/Sites/smallrepos/mocha/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/pelle/Sites/smallrepos/mocha/node_modules/canvas
npm ERR! gyp ERR! node -v v16.13.2
npm ERR! gyp ERR! node-gyp -v v8.4.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 '/Users/pelle/.nvm/versions/node/v16.13.2/bin/node /Users/pelle/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/Users/pelle/Sites/smallrepos/mocha/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/pelle/Sites/smallrepos/mocha/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/pelle/Sites/smallrepos/mocha/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1064: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 21.3.0
npm ERR! node-pre-gyp ERR! command "/Users/pelle/.nvm/versions/node/v16.13.2/bin/node" "/Users/pelle/Sites/smallrepos/mocha/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
npm ERR! node-pre-gyp ERR! cwd /Users/pelle/Sites/smallrepos/mocha/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v16.13.2
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.8
npm ERR! node-pre-gyp ERR! not ok
npm ERR! A complete log of this run can be found in:

npm ERR!     /Users/pelle/.npm/_logs/2022-02-09T07_28_28_922Z-debug-0.log

Reproduces how often: 100%

Versions

• The output of mocha --version and node node_modules/.bin/mocha --version: master
• The output of node --version: v16.13.2
• Your operating system
  • name and version: MacOs 12.2
  • architecture (32 or 64-bit): Arm64 (Apple M1)
• Your shell (e.g., bash, zsh, PowerShell, cmd): zsh
• Your browser and version (if running browser tests):
• Any third-party Mocha-related modules (and their versions):
• Any code transpiler (e.g., TypeScript, CoffeeScript, Babel) being used (and its version):

Additional Information

[juergba]

@voxpelli You can run npm install --ignore-scripts instead of npm install to prevent these errors. We use canvas to build our docs site only, so this option should work for most contributors. I think there is a note about that in our contribution guide.

For now I see no need for taking any action. We will update our canvas devDependency as soon as a new version is available.

[voxpelli]

@juergba Is there some documentation somewhere mentioning that that's the intended way to install a local dev copy?

[juergba]

Yes, in our contributing guide.