search

Automattic / node-canvas

Node canvas is a Cairo backed Canvas implementation for NodeJS.
10.2k stars 1.17k forks source link

Build Error: Incompatibility of `canvas@2.11.2` with Node.js v22.11.0 #2448

Open bahram-della-ai opened 3 weeks ago

bahram-della-ai commented 3 weeks ago

Description:

Hi there,

I'm experiencing build failures when trying to install canvas@2.11.2 using Node.js v22.11.0. It appears there might be compatibility issues between this version of Node.js and the canvas module.

Environment:

Steps to Reproduce:

  1. Dockerfile Setup:

    FROM node:lts-slim AS build
RUN apt-get update && apt-get install -y --no-install-recommends \
   make \
   g++ \
   dumb-init \
   build-essential \
   libcairo2-dev \
   libpango1.0-dev \
   libjpeg-dev \
   libgif-dev \
   librsvg2-dev \
   python3 \
   && rm -rf /var/lib/apt/lists/*

WORKDIR /usr
COPY package*.json tsconfig.json ./
RUN npm ci

  2. Install Dependencies:

    • Run npm ci to install all dependencies, including canvas@2.11.2.

  3. Observe the Build Failure:

    • The installation fails during the build process of canvas.

Error Log Highlights:

npm ERR! code 1
npm ERR! path /usr/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-pre-gyp install --fallback-to-build --update-binary
npm ERR! make: Entering directory '/usr/node_modules/canvas/build'
npm ERR!   SOLINK_MODULE(target) Release/obj.target/canvas-postbuild.node
npm ERR!   COPY Release/canvas-postbuild.node
npm ERR!   CXX(target) Release/obj.target/canvas/src/backend/Backend.o
npm ERR! In file included from ../src/backend/Backend.h:6,
npm ERR!                  from ../src/backend/Backend.cc:1:
npm ERR! ../../nan/nan.h: In function 'void Nan::SetAccessor(...)':
npm ERR! ../../nan/nan.h:2546:19: error: no matching function for call to 'v8::ObjectTemplate::SetAccessor(...)'
npm ERR! ...
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! node -v v22.11.0

Additional Information:

Questions:

  1. Compatibility Confirmation:

    • Is canvas@2.11.2 compatible with Node.js v22.11?
    • If not, are there plans to support Node.js v22.x in an upcoming release?

  2. Workarounds:

    • Are there any recommended steps or patches to make canvas work with Node.js v22.x?

  3. Dependency Updates:

    • Should we expect updates to dependencies like nan to address this compatibility issue?

Thank You:

Thank you for your time and assistance. Any guidance or updates on this matter would be greatly appreciated.

gareth-johnstone commented 3 weeks ago

This is also an issue for us, rolling back to version 20 FROM node:20-slim "fixes" the problem But not ideal.

bahram-della-ai commented 3 weeks ago

This is also an issue for us, rolling back to version 20 FROM node:20-slim "fixes" the problem But not ideal.

We did not find a better solution either

daimalou commented 2 weeks ago

same

usselman commented 2 weeks ago

Having the same issue.

cmahnke commented 2 weeks ago

Binaries aren't found either:

node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v127-linux-glibc-x64.tar.gz
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-v127-linux-glibc-x64.tar.gz 
node-pre-gyp WARN Pre-built binaries not installable for canvas@2.11.2 and node@22.11.0 (node-v127 ABI, glibc) (falling back to source compile with node-gyp)

This happens on GitHub Actions, since I use actions/setup-node@v4.1.0 with a version of lts/*, maybe the latest LTS has been changed?

alvis commented 2 weeks ago

My workaround is to upgrade canvas to v3 RC, which removes some deprecated dependencies. However, note that it requires node-gyp version 10 for compilation. The version bundled with Node is often only version 9.

daimalou commented 2 weeks ago

It often happens that node-gyp fails with errors. It would be great if someone could rewrite it using napi-rs.

cmahnke commented 2 weeks ago

@daimalou Have a look at https://github.com/Brooooooklyn/canvas

usselman commented 2 weeks ago

For anyone coming to this in the future, I was able to migrate my canvas application very easily to https://github.com/samizdatco/skia-canvas

I also tried the above napi-rs/canvas but the Rust typing wasn't playing nice with my app, so the package I linked worked better for my use.

Hope this is fixed soon.

cmahnke commented 2 weeks ago

Since no one mentioned it, but this is actually a problem known for some time:

Similar:

Let's face it, given there also is https://github.com/Automattic/node-canvas/issues/2433 and the lastest release is one and a half years old it's safe to assume, that this package is't supported anymore. There isn't even a janitor for the issue tracker and the branch for the next version isn't active either. Time (for downstream projects) to move on...

See ABI versions for the current LTS release here: https://github.com/electron/node-abi/blob/main/abi_registry.json

karlhorky commented 2 weeks ago

I encountered error messages about "Package pangocairo was not found in the pkg-config search path" with canvas not building today as I was trying to deploy with the current Node.js LTS (v22.10.0) on GitHub Actions.

This is after the first error ERR! install response status 404 Not Found, when it tries to download the precompiled binary, which doesn't exist (this error is a red herring because it's not important that the precompiled binaries don't exist, since we can build from source).

$ pnpm install

...

.../node_modules/canvas install$ node-pre-gyp install --fallback-to-build --update-binary
.../node_modules/canvas install: node-pre-gyp info it worked if it ends with ok
.../node_modules/canvas install: node-pre-gyp info using node-pre-gyp@1.0.11
.../node_modules/canvas install: node-pre-gyp info using node@22.10.0 | linux | x64
.../node_modules/canvas install: (node:1833) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
.../node_modules/canvas install: (Use `node --trace-deprecation ...` to show where the warning was created)
.../node_modules/canvas install: node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v127-linux-glibc-x64.tar.gz
.../node_modules/canvas install: 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-v127-linux-glibc-x64.tar.gz 
.../node_modules/canvas install: node-pre-gyp WARN Pre-built binaries not installable for canvas@2.11.2 and node@22.10.0 (node-v127 ABI, glibc) (falling back to source compile with node-gyp) 
.../node_modules/canvas install: 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-v127-linux-glibc-x64.tar.gz 
.../node_modules/canvas install: gyp info it worked if it ends with ok
.../node_modules/canvas install: gyp info using node-gyp@10.2.0
.../node_modules/canvas install: gyp info using node@22.10.0 | linux | x64
.../node_modules/canvas install: gyp info ok 
.../node_modules/canvas install: gyp info it worked if it ends with ok
.../node_modules/canvas install: gyp info using node-gyp@10.2.0
.../node_modules/canvas install: gyp info using node@22.10.0 | linux | x64
.../node_modules/canvas install: gyp info find Python using Python version 3.10.12 found at "/usr/bin/python3"
.../node_modules/canvas install: gyp http GET https://nodejs.org/download/release/v22.10.0/node-v22.10.0-headers.tar.gz
.../node_modules/canvas install: gyp http 200 https://nodejs.org/download/release/v22.10.0/node-v22.10.0-headers.tar.gz
.../node_modules/canvas install: gyp http GET https://nodejs.org/download/release/v22.10.0/SHASUMS256.txt
.../node_modules/canvas install: gyp http 200 https://nodejs.org/download/release/v22.10.0/SHASUMS256.txt
.../node_modules/canvas install: gyp info spawn /usr/bin/python3
.../node_modules/canvas install: gyp info spawn args [
.../node_modules/canvas install: gyp info spawn args '/home/runner/setup-pnpm/node_modules/.pnpm/pnpm@9.12.3/node_modules/pnpm/dist/node_modules/node-gyp/gyp/gyp_main.py',
.../node_modules/canvas install: gyp info spawn args 'binding.gyp',
.../node_modules/canvas install: gyp info spawn args '-f',
.../node_modules/canvas install: gyp info spawn args 'make',
.../node_modules/canvas install: gyp info spawn args '-I',
.../node_modules/canvas install: gyp info spawn args '/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas/build/config.gypi',
.../node_modules/canvas install: gyp info spawn args '-I',
.../node_modules/canvas install: gyp info spawn args '/home/runner/setup-pnpm/node_modules/.pnpm/pnpm@9.12.3/node_modules/pnpm/dist/node_modules/node-gyp/addon.gypi',
.../node_modules/canvas install: gyp info spawn args '-I',
.../node_modules/canvas install: gyp info spawn args '/home/runner/.cache/node-gyp/22.10.0/include/node/common.gypi',
.../node_modules/canvas install: gyp info spawn args '-Dlibrary=shared_library',
.../node_modules/canvas install: gyp info spawn args '-Dvisibility=default',
.../node_modules/canvas install: gyp info spawn args '-Dnode_root_dir=/home/runner/.cache/node-gyp/22.10.0',
.../node_modules/canvas install: gyp info spawn args '-Dnode_gyp_dir=/home/runner/setup-pnpm/node_modules/.pnpm/pnpm@9.12.3/node_modules/pnpm/dist/node_modules/node-gyp',
.../node_modules/canvas install: gyp info spawn args '-Dnode_lib_file=/home/runner/.cache/node-gyp/22.10.0/<(target_arch)/node.lib',
.../node_modules/canvas install: gyp info spawn args '-Dmodule_root_dir=/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas',
.../node_modules/canvas install: gyp info spawn args '-Dnode_engine=v8',
.../node_modules/canvas install: gyp info spawn args '--depth=.',
.../node_modules/canvas install: gyp info spawn args '--no-parallel',
.../node_modules/canvas install: gyp info spawn args '--generator-output',
.../node_modules/canvas install: gyp info spawn args 'build',
.../node_modules/canvas install: gyp info spawn args '-Goutput_dir=.'
.../node_modules/canvas install: gyp info spawn args ]
.../node_modules/canvas install: Package pangocairo was not found in the pkg-config search path.
.../node_modules/canvas install: Perhaps you should add the directory containing `pangocairo.pc'
.../node_modules/canvas install: to the PKG_CONFIG_PATH environment variable
.../node_modules/canvas install: Package 'pangocairo', required by 'virtual:world', not found
.../node_modules/canvas install: gyp: Call to 'pkg-config pangocairo --libs' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
.../node_modules/canvas install: gyp ERR! configure error 
.../node_modules/canvas install: gyp ERR! stack Error: `gyp` failed with exit code: 1
.../node_modules/canvas install: gyp ERR! stack at ChildProcess.<anonymous> (/home/runner/setup-pnpm/node_modules/.pnpm/pnpm@9.12.3/node_modules/pnpm/dist/node_modules/node-gyp/lib/configure.js:317:18)
.../node_modules/canvas install: gyp ERR! stack at ChildProcess.emit (node:events:518:28)
.../node_modules/canvas install: gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:293:12)
.../node_modules/canvas install: gyp ERR! System Linux 6.5.0-1025-azure
.../node_modules/canvas install: gyp ERR! command "/opt/hostedtoolcache/node/22.10.0/x64/bin/node" "/home/runner/setup-pnpm/node_modules/.pnpm/pnpm@9.12.3/node_modules/pnpm/dist/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas/build/Release" "--napi_version=9" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v127"
.../node_modules/canvas install: gyp ERR! cwd /home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas
.../node_modules/canvas install: gyp ERR! node -v v22.10.0
.../node_modules/canvas install: gyp ERR! node-gyp -v v10.2.0
.../node_modules/canvas install: gyp ERR! not ok 
.../node_modules/canvas install: node-pre-gyp ERR! build error 
.../node_modules/canvas install: node-pre-gyp ERR! stack Error: Failed to execute '/opt/hostedtoolcache/node/22.10.0/x64/bin/node /home/runner/setup-pnpm/node_modules/.pnpm/pnpm@9.12.3/node_modules/pnpm/dist/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v127' (1)
.../node_modules/canvas install: node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/@mapbox+node-pre-gyp@1.0.11_encoding@0.1.13/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
.../node_modules/canvas install: node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:518:28)
.../node_modules/canvas install: node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1104:16)
.../node_modules/canvas install: node-pre-gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:304:5)
.../node_modules/canvas install: node-pre-gyp ERR! System Linux 6.5.0-1025-azure
.../node_modules/canvas install: node-pre-gyp ERR! command "/opt/hostedtoolcache/node/22.10.0/x64/bin/node" "/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/@mapbox+node-pre-gyp@1.0.11_encoding@0.1.13/node_modules/@mapbox/node-pre-gyp/bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
.../node_modules/canvas install: node-pre-gyp ERR! cwd /home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas
.../node_modules/canvas install: node-pre-gyp ERR! node -v v22.10.0
.../node_modules/canvas install: node-pre-gyp ERR! node-pre-gyp -v v1.0.11
.../node_modules/canvas install: node-pre-gyp ERR! not ok 
.../node_modules/canvas install: Failed to execute '/opt/hostedtoolcache/node/22.10.0/x64/bin/node /home/runner/setup-pnpm/node_modules/.pnpm/pnpm@9.12.3/node_modules/pnpm/dist/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v127' (1)
.../node_modules/canvas install: Failed

Resolution: Upgrade to canvas@3.0.0-rc2, install dependencies

Step 1: Before looking too deeply at the error message, I found recommendations to use canvas@3.0.0-rc2 (recommendation 1, recommendation 2). So the first thing that I tried, before researching further about "pangocairo" was to upgrade to canvas@3.0.0-rc2.

This didn't change the error message, the "Package pangocairo was not found in the pkg-config search path" was still in the logs.

Step 2: I researched the error message and found that the canvas docs recommend installing some dependencies for building from source:

Compiling

If you don't have a supported OS or processor architecture, or you use --build-from-source, the module will be compiled on your system. This requires several dependencies, including Cairo and Pango.

For detailed installation information, see the wiki. One-line installation instructions for common OSes are below. Note that libgif/giflib, librsvg and libjpeg are optional and only required if you need GIF, SVG and JPEG support, respectively. Cairo v1.10.0 or later is required.

OS Command
macOS Using Homebrew:
brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman python-setuptools
Ubuntu sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev

I saw that libcairo2-dev and libpango1.0-dev were dependencies and these seemed to match my error message "Package pangocairo was not found in the pkg-config search path".

I decided to try installing these dependencies in the GitHub Actions workflow:

      # https://github.com/Automattic/node-canvas/blob/a2e10e61413a0d158174a7a869c16aa13e5d3575/Readme.md?plain=1#L39
      - name: Install canvas dependencies
        run: sudo apt-get install libcairo2-dev libpango1.0-dev

This resolved the issue, as shown in the PR (unfortunately, also contains irrelevant changes):

What about canvas@2.11.2?

If you're still using the non-RC version, then you may receive an additional error "fatal error: gif_lib.h: No such file or directory":

.../node_modules/canvas install$ node-pre-gyp install --fallback-to-build --update-binary
.../node_modules/canvas install: node-pre-gyp info it worked if it ends with ok
.../node_modules/canvas install: node-pre-gyp info using node-pre-gyp@1.0.11
.../node_modules/canvas install: node-pre-gyp info using node@22.10.0 | linux | x64
.../node_modules/canvas install: (node:2048) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
.../node_modules/canvas install: (Use `node --trace-deprecation ...` to show where the warning was created)
.../node_modules/canvas install: node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v127-linux-glibc-x64.tar.gz
.../node_modules/canvas install: 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-v127-linux-glibc-x64.tar.gz 
.../node_modules/canvas install: node-pre-gyp WARN Pre-built binaries not installable for canvas@2.11.2 and node@22.10.0 (node-v127 ABI, glibc) (falling back to source compile with node-gyp) 
.../node_modules/canvas install: 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-v127-linux-glibc-x64.tar.gz 
.../node_modules/canvas install: gyp info it worked if it ends with ok
.../node_modules/canvas install: gyp info using node-gyp@10.2.0
.../node_modules/canvas install: gyp info using node@22.10.0 | linux | x64
.../node_modules/canvas install: gyp info ok 
.../node_modules/canvas install: gyp info it worked if it ends with ok
.../node_modules/canvas install: gyp info using node-gyp@10.2.0
.../node_modules/canvas install: gyp info using node@22.10.0 | linux | x64
.../node_modules/canvas install: gyp info find Python using Python version 3.10.12 found at "/usr/bin/python3"
.../node_modules/canvas install: gyp http GET https://nodejs.org/download/release/v22.10.0/node-v22.10.0-headers.tar.gz
.../node_modules/canvas install: gyp http 200 https://nodejs.org/download/release/v22.10.0/node-v22.10.0-headers.tar.gz
.../node_modules/canvas install: gyp http GET https://nodejs.org/download/release/v22.10.0/SHASUMS256.txt
.../node_modules/canvas install: gyp http 200 https://nodejs.org/download/release/v22.10.0/SHASUMS256.txt
.../node_modules/canvas install: gyp info spawn /usr/bin/python3
.../node_modules/canvas install: gyp info spawn args [
.../node_modules/canvas install: gyp info spawn args '/home/runner/setup-pnpm/node_modules/.pnpm/pnpm@9.12.3/node_modules/pnpm/dist/node_modules/node-gyp/gyp/gyp_main.py',
.../node_modules/canvas install: gyp info spawn args 'binding.gyp',
.../node_modules/canvas install: gyp info spawn args '-f',
.../node_modules/canvas install: gyp info spawn args 'make',
.../node_modules/canvas install: gyp info spawn args '-I',
.../node_modules/canvas install: gyp info spawn args '/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas/build/config.gypi',
.../node_modules/canvas install: gyp info spawn args '-I',
.../node_modules/canvas install: gyp info spawn args '/home/runner/setup-pnpm/node_modules/.pnpm/pnpm@9.12.3/node_modules/pnpm/dist/node_modules/node-gyp/addon.gypi',
.../node_modules/canvas install: gyp info spawn args '-I',
.../node_modules/canvas install: gyp info spawn args '/home/runner/.cache/node-gyp/22.10.0/include/node/common.gypi',
.../node_modules/canvas install: gyp info spawn args '-Dlibrary=shared_library',
.../node_modules/canvas install: gyp info spawn args '-Dvisibility=default',
.../node_modules/canvas install: gyp info spawn args '-Dnode_root_dir=/home/runner/.cache/node-gyp/22.10.0',
.../node_modules/canvas install: gyp info spawn args '-Dnode_gyp_dir=/home/runner/setup-pnpm/node_modules/.pnpm/pnpm@9.12.3/node_modules/pnpm/dist/node_modules/node-gyp',
.../node_modules/canvas install: gyp info spawn args '-Dnode_lib_file=/home/runner/.cache/node-gyp/22.10.0/<(target_arch)/node.lib',
.../node_modules/canvas install: gyp info spawn args '-Dmodule_root_dir=/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas',
.../node_modules/canvas install: gyp info spawn args '-Dnode_engine=v8',
.../node_modules/canvas install: gyp info spawn args '--depth=.',
.../node_modules/canvas install: gyp info spawn args '--no-parallel',
.../node_modules/canvas install: gyp info spawn args '--generator-output',
.../node_modules/canvas install: gyp info spawn args 'build',
.../node_modules/canvas install: gyp info spawn args '-Goutput_dir=.'
.../node_modules/canvas install: gyp info spawn args ]
.../node_modules/canvas install: gyp info ok 
.../node_modules/canvas install: gyp info it worked if it ends with ok
.../node_modules/canvas install: gyp info using node-gyp@10.2.0
.../node_modules/canvas install: gyp info using node@22.10.0 | linux | x64
.../node_modules/canvas install: gyp info spawn make
.../node_modules/canvas install: gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
.../node_modules/canvas install: make: Entering directory '/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas/build'
.../node_modules/canvas install:   SOLINK_MODULE(target) Release/obj.target/canvas-postbuild.node
.../node_modules/canvas install:   COPY Release/canvas-postbuild.node
.../node_modules/canvas install:   CXX(target) Release/obj.target/canvas/src/backend/Backend.o
.../node_modules/canvas install:   CXX(target) Release/obj.target/canvas/src/backend/ImageBackend.o
.../node_modules/canvas install:   CXX(target) Release/obj.target/canvas/src/backend/PdfBackend.o
.../node_modules/canvas install:   CXX(target) Release/obj.target/canvas/src/backend/SvgBackend.o
.../node_modules/canvas install:   CXX(target) Release/obj.target/canvas/src/bmp/BMPParser.o
.../node_modules/canvas install:   CXX(target) Release/obj.target/canvas/src/Backends.o
.../node_modules/canvas install:   CXX(target) Release/obj.target/canvas/src/Canvas.o
.../node_modules/canvas install:   CXX(target) Release/obj.target/canvas/src/CanvasGradient.o
.../node_modules/canvas install:   CXX(target) Release/obj.target/canvas/src/CanvasPattern.o
.../node_modules/canvas install: In file included from ../src/CanvasPattern.cc:6:
.../node_modules/canvas install: ../src/Image.h:18:10: fatal error: gif_lib.h: No such file or directory
.../node_modules/canvas install:    18 | #include <gif_lib.h>
.../node_modules/canvas install:       |          ^~~~~~~~~~~
.../node_modules/canvas install: compilation terminated.
.../node_modules/canvas install: make: *** [canvas.target.mk:163: Release/obj.target/canvas/src/CanvasPattern.o] Error 1
.../node_modules/canvas install: make: Leaving directory '/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas/build'
.../node_modules/canvas install: gyp ERR! build error 
.../node_modules/canvas install: gyp ERR! stack Error: `make` failed with exit code: 2
.../node_modules/canvas install: gyp ERR! stack at ChildProcess.<anonymous> (/home/runner/setup-pnpm/node_modules/.pnpm/pnpm@9.12.3/node_modules/pnpm/dist/node_modules/node-gyp/lib/build.js:216:23)
.../node_modules/canvas install: gyp ERR! System Linux 6.5.0-1025-azure
.../node_modules/canvas install: gyp ERR! command "/opt/hostedtoolcache/node/22.10.0/x64/bin/node" "/home/runner/setup-pnpm/node_modules/.pnpm/pnpm@9.12.3/node_modules/pnpm/dist/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--update-binary" "--module=/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas/build/Release" "--napi_version=9" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v127"
.../node_modules/canvas install: gyp ERR! cwd /home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas
.../node_modules/canvas install: gyp ERR! node -v v22.10.0
.../node_modules/canvas install: gyp ERR! node-gyp -v v10.2.0
.../node_modules/canvas install: gyp ERR! not ok 
.../node_modules/canvas install: node-pre-gyp ERR! build error 
.../node_modules/canvas install: node-pre-gyp ERR! stack Error: Failed to execute '/opt/hostedtoolcache/node/22.10.0/x64/bin/node /home/runner/setup-pnpm/node_modules/.pnpm/pnpm@9.12.3/node_modules/pnpm/dist/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --update-binary --module=/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v127' (1)
.../node_modules/canvas install: node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/@mapbox+node-pre-gyp@1.0.11_encoding@0.1.13/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
.../node_modules/canvas install: node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:518:28)
.../node_modules/canvas install: node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1104:16)
.../node_modules/canvas install: node-pre-gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:304:5)
.../node_modules/canvas install: node-pre-gyp ERR! System Linux 6.5.0-1025-azure
.../node_modules/canvas install: node-pre-gyp ERR! command "/opt/hostedtoolcache/node/22.10.0/x64/bin/node" "/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/@mapbox+node-pre-gyp@1.0.11_encoding@0.1.13/node_modules/@mapbox/node-pre-gyp/bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
.../node_modules/canvas install: node-pre-gyp ERR! cwd /home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas
.../node_modules/canvas install: node-pre-gyp ERR! node -v v22.10.0
.../node_modules/canvas install: node-pre-gyp ERR! node-pre-gyp -v v1.0.11
.../node_modules/canvas install: node-pre-gyp ERR! not ok 
.../node_modules/canvas install: Failed to execute '/opt/hostedtoolcache/node/22.10.0/x64/bin/node /home/runner/setup-pnpm/node_modules/.pnpm/pnpm@9.12.3/node_modules/pnpm/dist/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --update-binary --module=/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/home/runner/work/security-vulnerability-examples-next-js-postgres/security-vulnerability-examples-next-js-postgres/node_modules/.pnpm/canvas@2.11.2_encoding@0.1.13/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v127' (1)
.../node_modules/canvas install: Failed

This I tried to resolve in the same way, adding the dependency libgif-dev from the docs that matched the error message (in addition to the existing libcairo2-dev and libpango1.0-dev dependencies):

      # https://github.com/Automattic/node-canvas/blob/a2e10e61413a0d158174a7a869c16aa13e5d3575/Readme.md?plain=1#L39
      - name: Install canvas dependencies
        run: sudo apt-get install libcairo2-dev libpango1.0-dev libgif-dev

This also resolved the build issue, as shown in this PR:

cmahnke commented 2 weeks ago

@karlhorky Thanks for your extensive and helpful analysis and hints!

Anyways: While it's still possible to build the module fro source not everyone either has the required tool chain (or even required knowledge) at had. And that should considered to be perfectly fine. Given that this module is also a dependency for pdf.js I guess there requirement might come to some as a surprise.

Same goes for the desire to run a pre release version - there are organisations where it's just imposible by policy / compilance frameworks etc..

And in the end it's just inefficient (also resource-wise as in Green-IT) to require users (of transitive dependency) to change their build infrastructure: Providing modules with C extensions is certainly another degree of responsibility, since those are more prone to break then native JS modules. Have a look at the pull requests, there are some to just automate those chores, but their not merged. These are clear indications to me that this project currently doesn't have the resources to support the code properly.

While I value your post, I would propose to other readers to use this to prepare a migration / transition.

s-h-a-d-o-w commented 1 week ago

I also tried the above napi-rs/canvas but the Rust typing wasn't playing nice with my app, so the package I linked worked better for my use.

Also, questionable professionalism. (Not to mention ethical and even possible legal problems. I am going to go delete my browser cache now...) Thought I would point it out in case people don't bother scrolling down in the README.

jylee9937 commented 1 week ago

same issue here. I use node 20.10.0

jylee9937 commented 1 week ago

Step 2: I researched the error message and found that the canvas docs recommend installing some dependencies for building from source:

Compiling

If you don't have a supported OS or processor architecture, or you use --build-from-source, the module will be compiled on your system. This requires several dependencies, including Cairo and Pango. For detailed installation information, see the wiki. One-line installation instructions for common OSes are below. Note that libgif/giflib, librsvg and libjpeg are optional and only required if you need GIF, SVG and JPEG support, respectively. Cairo v1.10.0 or later is required.

OS Command

macOS Using Homebrew:brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman python-setuptools

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

I saw that libcairo2-dev and libpango1.0-dev were dependencies and these seemed to match my error message "Package pangocairo was not found in the pkg-config search path".

I decided to try installing these dependencies in the GitHub Actions workflow:

  # https://github.com/Automattic/node-canvas/blob/a2e10e61413a0d158174a7a869c16aa13e5d3575/Readme.md?plain=1#L39
  - name: Install canvas dependencies
    run: sudo apt-get install libcairo2-dev libpango1.0-dev

This resolved the issue, as shown in the PR (unfortunately, also contains irrelevant changes):

@karlhorky Thank you. I took a hint from your article and solved the problem that was with me.

I'm using Fabric.js, so I didn't think I could solve the error in canvas 2.11.0 myself.

The error message I had is as follows. "node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v115-linux-musl-x64.tar.gz"

However, as written in the document, if you installed the packages to compile and use them on your own, there was no error when you did yarn.

Since yesterday, I haven't been built, but I've finally solved it.

bennycode commented 1 week ago

Same issue on Windows:

npm error code 1
npm error path /home/bennycode/dev/bennycode/vorsorgi/node_modules/canvas
npm error command failed
npm error command sh -c node-pre-gyp install --fallback-to-build --update-binary
npm error Failed to execute '/home/bennycode/.nvm/versions/node/v22.11.0/bin/node /home/bennycode/.nvm/versions/node/v22.11.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/home/bennycode/dev/bennycode/vorsorgi/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/home/bennycode/dev/bennycode/vorsorgi/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v127' (1)
npm error node-pre-gyp info it worked if it ends with ok
npm error node-pre-gyp info using node-pre-gyp@1.0.11
npm error node-pre-gyp info using node@22.11.0 | linux | x64
sahal commented 3 days ago

I've checked to make sure that this is working on multiple node versions from 18-23. I've installed canvas by adding it to a blank project using yarn. It seems to be working when I just install canvas. Here is my build setup using Docker/Podman: https://gist.github.com/sahal/ec57d2e63764e7b125fca54267977bdc.

Logs: build-canvas-yarn-18-23-verbose.txt

I am, however, having problems when running my Joplin install when using node 23 (see linked ticket). It seems to fail when building canvas@2.11.2. I'm not a js dev, so I'm not sure why that might be though. Will follow up with my build logs for Joplin in the linked issue.

umeshramya commented 56 minutes ago

I am also facing issues with the canvas module not building on Node.js version 22.11.0, which is the default version on many cloud platforms. Resolving this has become a priority now.