[FIXED] Cannot npm install canvas [NodeJs on Windows]?

Issue

I am trying to use the ag-psd packgage for manipulating psd files. It works fine for the structure only but it encounters an error if you want to read the image data too. The error reads:

Cannot find module 'canvas',
..., code: 'MODULE_NOT_FOUND'

But if I try to install canvas I get the log that is at the bottom. I have followed the guides for canvas installation on windows here and here but I didn’t change anything.

This is my code. It is just the basic example I copied from the ag-psd guithub so it really should work:

const fs = require('fs');
require('ag-psd/initialize-canvas.js');
const { readPsd } = require('ag-psd');

var buffer = fs.readFileSync('psd.psd');
// this works
const psb1 = readPsd(buffer, { skipLayerImageData: true, skipCompositeImageData: true, skipThumbnail: true });
console.log(psb1);
// this doesn't
const psb2 = readPsd(buffer);
console.log(psb2);

Here is the error log:

npm ERR! code 1
npm ERR! path C:\Users\kaPa\Documents\DEV - CURRENT\Vtuber\node_modules\canvas
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c C:\Temp\install-1658595666125.cmd
npm ERR! Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\kaPa\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --update-binary --module=C:\Users\kaPa\Documents\DEV - CURRENT\Vtuber\node_modules\canvas\build\Release\canvas.node --module_name=canvas --module_path=C:\Users\kaPa\Documents\DEV - CURRENT\Vtuber\node_modules\canvas\build\Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108 --python=/path/to/executable/python --msvs_version=2017' (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.6.0 | win32 | x64
npm ERR! node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.9.3/canvas-v2.9.3-node-v108-win32-unknown-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.3/canvas-v2.9.3-node-v108-win32-unknown-x64.tar.gz
npm ERR! node-pre-gyp WARN Pre-built binaries not installable for canvas@2.9.3 and node@18.6.0 (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 https://github.com/Automattic/node-canvas/releases/download/v2.9.3/canvas-v2.9.3-node-v108-win32-unknown-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.6.0 | win32 | 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.6.0 | win32 | x64
npm ERR! gyp info find Python using Python version 3.9.5 found at "C:\Python39\python.exe"
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS msvs_version was set from command line or npm config
npm ERR! gyp ERR! find VS - looking for Visual Studio version 2017
npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp ERR! find VS checking VS2019 (16.10.31410.357) found at:
npm ERR! gyp ERR! find VS "C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools"
npm ERR! gyp ERR! find VS - found "Visual Studio C++ core features"
npm ERR! gyp ERR! find VS - found VC++ toolset: v142
npm ERR! gyp ERR! find VS - missing any Windows SDK
npm ERR! gyp ERR! find VS checking VS2019 (16.4.29613.14) found at:
npm ERR! gyp ERR! find VS "C:\Program Files (x86)\Microsoft Visual Studio\2019\Community"
npm ERR! gyp ERR! find VS - found "Visual Studio C++ core features"
npm ERR! gyp ERR! find VS - found VC++ toolset: v142
npm ERR! gyp ERR! find VS - found Windows SDK: 10.0.18362.0
npm ERR! gyp ERR! find VS - msvs_version does not match this version
npm ERR! gyp ERR! find VS could not find a version of Visual Studio 2017 or newer to use
npm ERR! gyp ERR! find VS looking for Visual Studio 2015
npm ERR! gyp ERR! find VS - not found
npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS valid versions for msvs_version:
npm ERR! gyp ERR! find VS - "2019"
npm ERR! gyp ERR! find VS - "C:\Program Files (x86)\Microsoft Visual Studio\2019\Community"
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio
npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.
npm ERR! gyp ERR! find VS For more information consult the documentation at:
npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use
npm ERR! gyp ERR! stack     at VisualStudioFinder.fail (C:\Users\kaPa\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:122:47)
npm ERR! gyp ERR! stack     at C:\Users\kaPa\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:75:16
npm ERR! gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (C:\Users\kaPa\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:363:14)
npm ERR! gyp ERR! stack     at C:\Users\kaPa\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:71:14
npm ERR! gyp ERR! stack     at C:\Users\kaPa\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:384:16
npm ERR! gyp ERR! stack     at C:\Users\kaPa\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\util.js:54:7
npm ERR! gyp ERR! stack     at C:\Users\kaPa\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\util.js:33:16
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:397:5)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1091:16)
npm ERR! gyp ERR! System Windows_NT 10.0.19043
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\kaPa\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "--fallback-to-build" 
"--update-binary" "--module=C:\\Users\\kaPa\\Documents\\DEV - CURRENT\\Vtuber\\node_modules\\canvas\\build\\Release\\canvas.node" "--module_name=canvas" "--module_path=C:\\Users\\kaPa\\Documents\\DEV 
- CURRENT\\Vtuber\\node_modules\\canvas\\build\\Release" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v108" "--python=/path/to/executable/python" "--msvs_version=2017"
npm ERR! gyp ERR! cwd C:\Users\kaPa\Documents\DEV - CURRENT\Vtuber\node_modules\canvas
npm ERR! gyp ERR! node -v v18.6.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 'C:\Program Files\nodejs\node.exe C:\Users\kaPa\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --update-binary --module=C:\Users\kaPa\Documents\DEV - CURRENT\Vtuber\node_modules\canvas\build\Release\canvas.node --module_name=canvas --module_path=C:\Users\kaPa\Documents\DEV - CURRENT\Vtuber\node_modules\canvas\build\Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108 --python=/path/to/executable/python --msvs_version=2017' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (C:\Users\kaPa\Documents\DEV - CURRENT\Vtuber\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 Windows_NT 10.0.19043
npm ERR! node-pre-gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\kaPa\\Documents\\DEV - CURRENT\\Vtuber\\node_modules\\@mapbox\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
npm ERR! node-pre-gyp ERR! cwd C:\Users\kaPa\Documents\DEV - CURRENT\Vtuber\node_modules\canvas     
npm ERR! node-pre-gyp ERR! node -v v18.6.0
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.9
npm ERR! node-pre-gyp ERR! not ok

Solution

Expanding on my comment…

The error in your install is:
404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.9.3/canvas-v2.9.3-node-v108-win32-unknown-x64.tar.gz

If we go to the releases page:
https://github.com/Automattic/node-canvas/releases
unfortunately there is no node-v108 support there


From one of the contributors of that package:
https://github.com/Automattic/node-canvas/issues/2052#issuecomment-1157912610

We don’t have prebuilds available yet for Node 18, and unfortunately a lot has to happen to make them, see #2025(https://github.com/Automattic/node-canvas/issues/2025) . Until then, this module has to be built from source following https://github.com/Automattic/node-canvas#compiling. If you have troubles compiling, please open a separate issue.

Answered By – Helder Sepulveda

Answer Checked By – Willingham (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published