Cannot install canvas on npm

E

8

12

I am trying to install canvas on my raspberry pi via npm after successfully installing on my main pc, but now I get a really long error that I don't know how to fix.
Here's the full error:

npm ERR! gyp info spawn args ]
npm ERR! Package pixman-1 was not found in the pkg-config search path.
npm ERR! Perhaps you should add the directory containing `pixman-1.pc'
npm ERR! to the PKG_CONFIG_PATH environment variable
npm ERR! No package 'pixman-1' found
npm ERR! gyp: Call to 'pkg-config pixman-1 --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 (/usr/local/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 Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
npm ERR! gyp ERR! System Linux 5.15.32+
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=/home/alex/discord-bot/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/home/alex/discord-bot/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 /home/alex/discord-bot/node_modules/canvas
npm ERR! gyp ERR! node -v v16.16.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/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/home/alex/discord-bot/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/home/alex/discord-bot/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.<anonymous> (/home/alex/discord-bot/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:1092:16)
npm ERR! node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! node-pre-gyp ERR! System Linux 5.15.32+
npm ERR! node-pre-gyp ERR! command "/usr/local/bin/node" "/home/alex/discord-bot/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
npm ERR! node-pre-gyp ERR! cwd /home/alex/discord-bot/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v16.16.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!     /home/alex/.npm/_logs/2022-08-09T20_08_23_632Z-debug-0.log

I used the command npm install --build-from-source canvas, please can I have help?

Esme answered 9/8, 2022 at 20:15 Comment(0)

B

13

Seems you're missing the 'pixman' dependency. Did you follow the guide to install all the needed dependencies before installing canvas? It requires a bunch of dependencies.

Bumblebee answered 10/8, 2022 at 15:22 Comment(5)

This is the right answer ! – Mansion 4/6, 2023 at 22:46

Linking to an image of otherwise perfectly copy-pastable commands has to be one of the most infuriating things you can do. Please fix it and actually link to the page that screenshot was taken from. – Jilolo 17/2 at 6:32

still relevant. – Xymenes 6/3 at 20:9

is the canvas npm package still the best way to access an html canvas element in node? i want to render some text as an image – Lauter 5/4 at 6:6

still not working. anyone have a clue? – Astrolabe 8/4 at 16:8

C

25

Try this before run npm install canvas. It work for me

brew install pkg-config cairo pango libpng jpeg giflib librsvg

Ref : https://flaviocopes.com/fix-node-canvas-error-pre-gyp-macos/

Copyread answered 13/8, 2022 at 16:40 Comment(2)

It worked for me as well brew install pkg-config cairo pango libpng jpeg giflib librsvg – Anisometric 8/12, 2022 at 16:49

worked for me on macOS 14 with Apple Silicon chipset – Daltondaltonism 27/5 at 10:28

B

13

Seems you're missing the 'pixman' dependency. Did you follow the guide to install all the needed dependencies before installing canvas? It requires a bunch of dependencies.

Bumblebee answered 10/8, 2022 at 15:22 Comment(5)

This is the right answer ! – Mansion 4/6, 2023 at 22:46

Linking to an image of otherwise perfectly copy-pastable commands has to be one of the most infuriating things you can do. Please fix it and actually link to the page that screenshot was taken from. – Jilolo 17/2 at 6:32

still relevant. – Xymenes 6/3 at 20:9

is the canvas npm package still the best way to access an html canvas element in node? i want to render some text as an image – Lauter 5/4 at 6:6

still not working. anyone have a clue? – Astrolabe 8/4 at 16:8

L

3

1 Install Dependencies: Install the required dependencies using Homebrew. Open a terminal and run the following commands:

brew install pkg-config cairo pango libpng jpeg giflib

2 Set PKG_CONFIG_PATH: Export PKG_CONFIG_PATH to include the directory containing pixman-1.pc. Add the following line to your shell profile file (e.g., ~/.zshrc or ~/.bashrc):

export PKG_CONFIG_PATH="/opt/homebrew/opt/pixman/lib/pkgconfig"

Then, restart your terminal or run:

source ~/.zshrc # or source ~/.bashrc if you are using bash

3 Reinstall Node Modules: Remove the node_modules directory and package-lock.json file from your project and then reinstall the dependencies:

rm -rf node_modules package-lock.json npm install

Logorrhea answered 12/1 at 20:8 Comment(1)

the only one that worked for me – Gemstone 19/4 at 13:44

B

1

You have to install required dependencies for compiling your system from https://www.npmjs.com/package/canvas

For ubuntu i did

sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev

Bissextile answered 9/12, 2022 at 15:19 Comment(0)

H

1

You need to install these modules (see canvas readme)

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

If you have an error like import gyp not found, you can try this

python3 -m pip install gyp-next

Handiwork answered 5/6 at 13:40 Comment(0)

B

1

For me the solution is to use python 3.10.0, I was using python 3.10.14, which is the default version of python 3.10 if you install python with homebrew. After I specifically installed python 3.10.0, the error is gone and installation goes through. I’m on a 2019 intel chip mac

Berri answered 26/6 at 23:51 Comment(1)

I was using Python 3.9. Upgrading to 3.12.4 fixed the issue – Kinetics 11/7 at 21:28

E

0

In my case it's resolved by manually installing packages inside of canvas.

Apparently if you set NPM to ignore scripts, which prevents node-pre-gyp from downloading prebuilt binaries. I accessed to canvas folder in node_modules and then manually run node-gyp rebuild and then it worked.

Electroanalysis answered 17/8, 2023 at 21:16 Comment(0)

P

0

My case:

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

Perforate answered 24/6 at 18:24 Comment(0)

Recommended topics

Hot tags