Chart JS Nod Canvas Fails To Install

[SrS2225a]

Describe the bug
A while ago I ran into an issue where an required dependency canvas was telling me it was complied against a older node version, so I went through the suggested steps of running npm install and npm rebuild, both of which did not work, so eventually I did a full uninstall of chart js node canvas, then installed it again. But after doing so. this time it was giving me a critical error that it could not make the dependency. What is the reason for this? This is the full error:

npm ERR! path /root/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-pre-gyp install --fallback-to-build
npm ERR! Failed to execute '/usr/bin/node /usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/root/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/root/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 node-pre-gyp@1.0.9
npm ERR! node-pre-gyp info using node@18.2.0 | linux | x64
npm ERR! node-pre-gyp info check checked for "/root/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.1/canvas-v2.9.1-node-v108-linux-glibc-x64.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.1/canvas-v2.9.1-node-v108-linux-glibc-x64.tar.gz 
npm ERR! node-pre-gyp WARN Pre-built binaries not installable for canvas@2.9.1 and node@18.2.0 (node-v108 ABI, glibc) (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.1/canvas-v2.9.1-node-v108-linux-glibc-x64.tar.gz 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@9.0.0
npm ERR! gyp info using node@18.2.0 | linux | x64
npm ERR! gyp info ok 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@9.0.0
npm ERR! gyp info using node@18.2.0 | linux | x64
npm ERR! gyp info find Python using Python version 3.10.4 found at "/usr/bin/python3"
npm ERR! gyp info spawn /usr/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/usr/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   '/root/node_modules/canvas/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/usr/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/root/.cache/node-gyp/18.2.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=/root/.cache/node-gyp/18.2.0',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/usr/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/root/.cache/node-gyp/18.2.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/root/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: line 1: 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.onCpExit (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:261:16)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:527:28)
npm ERR! gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:291:12)
npm ERR! gyp ERR! System Linux 5.15.43-1-lts
npm ERR! gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/root/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/root/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 /root/node_modules/canvas
npm ERR! gyp ERR! node -v v18.2.0
npm ERR! gyp ERR! node-gyp -v v9.0.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 '/usr/bin/node /usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/root/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/root/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> (/root/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:527:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1090: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 Linux 5.15.43-1-lts
npm ERR! node-pre-gyp ERR! command "/usr/bin/node" "/root/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
npm ERR! node-pre-gyp ERR! cwd /root/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v18.2.0
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.9
npm ERR! node-pre-gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2022-05-27T05_22_17_932Z-debug-0.log

Versions

• NodeJS version: 18.2.0
• NPM version: 8.10.0
• Chart.JS version: 4.1.6

[SeanSobey]

Hi there!

As per the NodeJS version section on the docs, node-canvas does note yet support node 18.x. You need to wait for support to be added or use a supported version like 16.x.x.

[SrS2225a]

I see, thank you. Is there a work around for now? And if not, is there an eta for when v18 will be supported? I could downgrade, but I don't want to risk breaking other node packages

[NekitCorp]

Hi there!

As per the NodeJS version section on the docs, node-canvas does note yet support node 18.x. You need to wait for support to be added or use a supported version like 16.x.x.

NodeJS v16.13.2 throws the same error:

npm ERR! gyp ERR! node -v v16.13.2
npm ERR! gyp ERR! node-gyp -v v8.3.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 ...

[Harm-Nullix]

Same as @NekitCorp :

Command: node-pre-gyp install --fallback-to-build --update-binary
Arguments: 
Directory: ../node_modules/canvas
Output:
node-pre-gyp info it worked if it ends with ok
node-pre-gyp info using node-pre-gyp@1.0.9
node-pre-gyp info using node@16.13.2 | darwin | arm64
node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.9.3/canvas-v2.9.3-node-v93-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.9.3/canvas-v2.9.3-node-v93-darwin-unknown-arm64.tar.gz 
node-pre-gyp WARN Pre-built binaries not installable for canvas@2.9.3 and node@16.13.2 (node-v93 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.9.3/canvas-v2.9.3-node-v93-darwin-unknown-arm64.tar.gz 
gyp info it worked if it ends with ok
gyp info using node-gyp@8.3.0
gyp info using node@16.13.2 | darwin | arm64

https://github.com/Automattic/node-canvas/releases/download/v2.9.3/canvas-v2.9.3-node-v93-darwin-unknown-arm64.tar.gz seems a not so valid path. 404.
Looks like all the releases end with x64.tar.gz, while I have a arm64.tar.gz target :(

Anyone know how to fix this?
I'm running M1 chip on Mac Pro

[Harm-Nullix]

So I did some research:

node-canvas currently does not support arm
You need to make a build yourself
The docs on that are pretty straight forward when found:
https://github.com/Automattic/node-canvas/wiki#installation-guides

brew install pkg-config cairo pango libpng jpeg giflib librsvg

then

yarn add chartjs-node-canvas
# or
npm install chartjs-node-canvas

And you should be all set!
It tries to make a own build so the yarn/npm command can take a while.

[Mordoxo]

PS C:\Users\tortu\Desktop\AI-Moderation-master> npm run start
npm WARN config global --global, --local are deprecated. Use --location=global instead.

ai-moderation@1.0.0 start
node dist/main.js

╭───────────────────────────────────────────────────────────────────╮
│ │
│ Discord.js: v14.1.2 │
│ │
│ Events: OK │
│ Commands: OK │
│ Database: MongoServerError: bad auth : Authentication failed. │
│ │
╰───────────────────────────────────────────────────────────────────╯

my console said this when i started the bot, how can i fix it?

[Stannnnn]

It seems like Automattic/node-canvas#2025 got resolved and canvas supports Node 18 now. Can the dep be updated?

Tried it here real quick: https://github.com/Stannnnn/ChartjsNodeCanvas and it seems to still generate an image.

[AntonAI]

@SeanSobey
Is this project still maintained? Can we at least bump the "canvas" dep so this works on Node 18+?

[viniciusaugutisps]

@SeanSobey any update?