Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't install on Apple M1 #1733

Closed
Glutch opened this issue Jan 16, 2021 · 51 comments
Closed

Can't install on Apple M1 #1733

Glutch opened this issue Jan 16, 2021 · 51 comments

Comments

@Glutch
Copy link

Glutch commented Jan 16, 2021

Issue or Feature

node:internal/modules/cjs/loader:1167
  return process.dlopen(module, path.toNamespacedPath(filename));
Error: dlopen(/Users/glutch/Documents/dev/javascript/xxxx/node_modules/canvas/build/Release/canvas.node, 1): Symbol not found: _cairo_fill

Steps to Reproduce

Not sure. I've installed Xcode tools, updated system to 11.1. Build from source with brew, port, reinstalled multiple times, reinstalled node-gyp, built from source, read 100 different threads, tried 100 different options. I'm so deep into this hole i have no idea what i've done. Please help me.

Your Environment

├── [email protected]
├─┬ [email protected]
│ ├── [email protected] deduped
│ └─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└─┬ [email protected]
└── [email protected] deduped

node v15.4.0
OSX 11.1 Big Sur - Apple Silicon M1

@timcreatedit
Copy link

I also didn't get it to work so far! If you manage to find a solution, I'd be very happy if you told me how 😊

@timcreatedit
Copy link

timcreatedit commented Jan 17, 2021

Ok, I somehow got it to work but I really don't know what I changed... I assume you ran brew install pkg-config cairo pango libpng jpeg giflib librsvg at some point? The only thing I remember doing was running brew doctor once, then npm uninstall canvas and npm i canvas --save

Also be sure you ran xcode-select --installof course

I hope this helps you somehow, but as I said I really have no idea why suddenly everything works

@lunarflint
Copy link

lunarflint commented Jan 19, 2021

Could be a little bit off topic, for me it seems that the /opt/homebrew/include folder is not in clang include path.

If you see this error:
fatal error: 'jpeglib.h' file not found
you can try
CPLUS_INCLUDE_PATH=/opt/homebrew/include npm i canvas (alternative you can use yarn),
or you can just export CPLUS_INCLUDE_PATH in, say, .zshrc.

To summarize, the following works for me,
xcode-select --install
brew install pkg-config cairo pango libpng jpeg giflib librsvg
CPLUS_INCLUDE_PATH=/opt/homebrew/include npm i canvas

@Glutch
Copy link
Author

Glutch commented Jan 19, 2021

This is what i got after trying the above

npm ERR! code 1
npm ERR! path /Users/glutch/Documents/dev/javascript/xxxxxxx/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-pre-gyp install --fallback-to-build
npm ERR! SOLINK_MODULE(target) Release/canvas-postbuild.node
npm ERR!   CXX(target) Release/obj.target/canvas/src/backend/Backend.o
npm ERR! Failed to execute '/Users/glutch/.nvm/versions/node/v15.4.0/bin/node /Users/glutch/.nvm/versions/node/v15.4.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/glutch/Documents/dev/javascript/xxxxxxx/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/glutch/Documents/dev/javascript/xxxxxxx/node_modules/canvas/build/Release --napi_version=7 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v88' (1)
npm ERR! node-pre-gyp info it worked if it ends with ok
npm ERR! node-pre-gyp info using [email protected]
npm ERR! node-pre-gyp info using [email protected] | darwin | arm64
npm ERR! node-pre-gyp WARN Using request for node-pre-gyp https download 
npm ERR! node-pre-gyp info check checked for "/Users/glutch/Documents/dev/javascript/xxxxxxx/node_modules/canvas/build/Release/canvas.node" (not found)
npm ERR! node-pre-gyp http GET https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v88-darwin-unknown-arm64.tar.gz
npm ERR! node-pre-gyp http 404 https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v88-darwin-unknown-arm64.tar.gz
npm ERR! node-pre-gyp WARN Tried to download(404): https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v88-darwin-unknown-arm64.tar.gz 
npm ERR! node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v88 ABI, unknown) (falling back to source compile with node-gyp) 
npm ERR! node-pre-gyp http 404 status code downloading tarball https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v88-darwin-unknown-arm64.tar.gz 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info ok 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info find Python using Python version 3.9.1 found at "/usr/local/bin/python3"
npm ERR! gyp info spawn /usr/local/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/Users/glutch/.nvm/versions/node/v15.4.0/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/glutch/Documents/dev/javascript/xxxxxxx/node_modules/canvas/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/glutch/.nvm/versions/node/v15.4.0/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/glutch/Library/Caches/node-gyp/15.4.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=/Users/glutch/Library/Caches/node-gyp/15.4.0',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/Users/glutch/.nvm/versions/node/v15.4.0/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/Users/glutch/Library/Caches/node-gyp/15.4.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/Users/glutch/Documents/dev/javascript/xxxxxxx/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! gyp info ok 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! In file included from ../src/backend/Backend.cc:1:
npm ERR! ../src/backend/Backend.h:3:10: fatal error: 'cairo.h' file not found
npm ERR! #include <cairo.h>
npm ERR!          ^~~~~~~~~
npm ERR! 1 error generated.
npm ERR! make: *** [Release/obj.target/canvas/src/backend/Backend.o] Error 1
npm ERR! gyp ERR! build error 
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/Users/glutch/.nvm/versions/node/v15.4.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:376:20)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:284:12)
npm ERR! gyp ERR! System Darwin 20.2.0
npm ERR! gyp ERR! command "/Users/glutch/.nvm/versions/node/v15.4.0/bin/node" "/Users/glutch/.nvm/versions/node/v15.4.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--module=/Users/glutch/Documents/dev/javascript/xxxxxxx/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/glutch/Documents/dev/javascript/xxxxxxx/node_modules/canvas/build/Release" "--napi_version=7" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v88"
npm ERR! gyp ERR! cwd /Users/glutch/Documents/dev/javascript/xxxxxxx/node_modules/canvas
npm ERR! gyp ERR! node -v v15.4.0
npm ERR! gyp ERR! node-gyp -v v7.1.2
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/glutch/.nvm/versions/node/v15.4.0/bin/node /Users/glutch/.nvm/versions/node/v15.4.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/glutch/Documents/dev/javascript/xxxxxxx/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/glutch/Documents/dev/javascript/xxxxxxx/node_modules/canvas/build/Release --napi_version=7 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v88' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/glutch/Documents/dev/javascript/xxxxxxx/node_modules/canvas/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:376:20)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1063:16)
npm ERR! node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:295:5)
npm ERR! node-pre-gyp ERR! System Darwin 20.2.0
npm ERR! node-pre-gyp ERR! command "/Users/glutch/.nvm/versions/node/v15.4.0/bin/node" "/Users/glutch/Documents/dev/javascript/xxxxxxx/node_modules/canvas/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
npm ERR! node-pre-gyp ERR! cwd /Users/glutch/Documents/dev/javascript/xxxxxxx/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v15.4.0
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v0.11.0
npm ERR! node-pre-gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/glutch/.npm/_logs/2021-01-19T20_15_37_216Z-debug.log
``

@lunarflint
Copy link

I'd suggest you try double checking cairo installation, as you see you got fatal error: 'cairo.h' file not found

Please do something like find /opt/homebrew -name 'cairo.h' (also try paths like /usr/local, or just search the root...).

Once you found it, add it to CPLUS_INCLUDE_PATH and see what happen.

@Glutch
Copy link
Author

Glutch commented Jan 20, 2021

I'd suggest you try double checking cairo installation, as you see you got fatal error: 'cairo.h' file not found

Please do something like find /opt/homebrew -name 'cairo.h' (also try paths like /usr/local, or just search the root...).

Once you found it, add it to CPLUS_INCLUDE_PATH and see what happen.

When i reinstall everything with brew, this is the output. So it seems like everything gets installed in usr/local/Cellar

🍺  /usr/local/Cellar/cairo/1.16.0_4: 119 files, 5.9MB
==> Downloading https://homebrew.bintray.com/bottles/pango-1.48.0.big_su
Already downloaded: /Users/glutch/Library/Caches/Homebrew/downloads/020f80a10b23d98571d30b1690b5ea5757bbad735983ef78b9cc2951bd792ea2--pango-1.48.0.big_sur.bottle.tar.gz
==> Reinstalling pango 
==> Pouring pango-1.48.0.big_sur.bottle.tar.gz
🍺  /usr/local/Cellar/pango/1.48.0: 64 files, 3MB
==> Downloading https://homebrew.bintray.com/bottles/libpng-1.6.37.big_s
Already downloaded: /Users/glutch/Library/Caches/Homebrew/downloads/deac3e81ac193bd2a95b35e3eeb8434fbfe3f3a98e0e42af2dfe447a2c9a9d4b--libpng-1.6.37.big_sur.bottle.tar.gz
==> Reinstalling libpng 
==> Pouring libpng-1.6.37.big_sur.bottle.tar.gz
🍺  /usr/local/Cellar/libpng/1.6.37: 27 files, 1.3MB
==> Downloading https://homebrew.bintray.com/bottles/jpeg-9d.big_sur.bot
Already downloaded: /Users/glutch/Library/Caches/Homebrew/downloads/366e6d056caccae5b912a1ce6eca6b57b85be5bf30ab316f24dce4d22cbb1d85--jpeg-9d.big_sur.bottle.tar.gz
==> Reinstalling jpeg 
==> Pouring jpeg-9d.big_sur.bottle.tar.gz
🍺  /usr/local/Cellar/jpeg/9d: 21 files, 953.8KB
==> Downloading https://homebrew.bintray.com/bottles/giflib-5.2.1.big_su
Already downloaded: /Users/glutch/Library/Caches/Homebrew/downloads/99bad899c726e44cf0ec5f145973ef9440f79cfc06808ba89deff78a3b58b791--giflib-5.2.1.big_sur.bottle.tar.gz
==> Reinstalling giflib 
==> Pouring giflib-5.2.1.big_sur.bottle.tar.gz
🍺  /usr/local/Cellar/giflib/5.2.1: 19 files, 599.6KB
==> Downloading https://homebrew.bintray.com/bottles/librsvg-2.50.2.big_
Already downloaded: /Users/glutch/Library/Caches/Homebrew/downloads/c351f2e8c10f8f753e612696edc408ee5674c0dfa0a877088f49592b4c5ec05c--librsvg-2.50.2.big_sur.bottle.tar.gz
==> Reinstalling librsvg 
==> Pouring librsvg-2.50.2.big_sur.bottle.tar.gz
==> /usr/local/opt/gdk-pixbuf/bin/gdk-pixbuf-query-loaders --update-cach
🍺  /usr/local/Cellar/librsvg/2.50.2: 48 files, 141MB

running sudo find / -name 'cairo.h' returns /usr/local/Cellar/cairo/1.16.0_4/include/cairo/cairo.h

Is it getting installed into the wrong location? I'm still getting the same error as above, cairo.h not found.

I ran set CPLUS_INCLUDE_PATH /usr/local/Cellar/cairo/1.16.0_4/include/cairo/cairo.h (since i have fish shell)
But that made no difference. I don't know what CPLUS_INCLUDE_PATH does though.

Any suggestions?

@lunarflint
Copy link

CPLUS_INCLUDE_PATH should be set to a folder not a file. Please google it for more details.

Also there should be a symbolic link to /opt/homebrew/include. You don't need to point to that directory actually assuming brew (itself) installation is intact.

@Glutch
Copy link
Author

Glutch commented Jan 20, 2021

CPLUS_INCLUDE_PATH should be set to a folder not a file. Please google it for more details.

Also there should be a symbolic link to /opt/homebrew/include. You don't need to point to that directory actually assuming brew (itself) installation is intact.

Okey i see, what path should i set for CPLUS_INCLUDE_PATH? i tried usr/local/ but didnt work

@lunarflint
Copy link

Ideally /opt/homebrew/include, If you can't find a link in /opt/homebrew/include, something is wrong with brew. Please fix brew first otherwise you will eventually encounter more problems later on.

For now you can try /usr/local/Cellar/cairo/1.16.0_4/include/cairo as a hack.

@Glutch
Copy link
Author

Glutch commented Jan 20, 2021

Ideally /opt/homebrew/include, If you can't find a link in /opt/homebrew/include, something is wrong with brew. Please fix brew first otherwise you will eventually encounter more problems later on.

For now you can try /usr/local/Cellar/cairo/1.16.0_4/include/cairo as a hack.

any recommendations how to fix brew? i suspect fish shell to be breaking everything

@dizney
Copy link

dizney commented Jan 20, 2021

@Glutch It looks a bit like you installed homebrew under rosetta? See https://docs.brew.sh/Installation, for intel it installs in /usr/local and for apple silicon to /opt/homebrew.
I also dont see arm64 in your homebrew install log, eg you get Pouring librsvg-2.50.2.big_sur.bottle.tar.gz where i get Pouring librsvg-2.50.2.arm64_big_sur.bottle.tar.gz.

@Glutch
Copy link
Author

Glutch commented Jan 20, 2021

I'm really trying but i can't figure this out. I've created a rosetta 2 terminal shortcut and tried reinstalled brew there, and with arch -x86_64 brew install pkg-config cairo pango libpng jpeg giflib librsvg. Checked multiple sites.

removed node_modules etc but i'm still getting the missing cairo.h error message

can someone write step by step including commands to run?

@dwkns
Copy link

dwkns commented Jan 22, 2021

Are you using yarn in your project rather than npm?

CPLUS_INCLUDE_PATH=/opt/homebrew/include npm i canvas failed for me.

CPLUS_INCLUDE_PATH=/opt/homebrew/include yarn add canvas worked.

Also you could be mixing both x64 and arm64 versions of Homebrew. That is probably not a good idea. Try removing both only installing the arm64 version.

Also nuke your node_modules and package-lock.json or yarn.lock and reinstall everything.

@KotoriK
Copy link

KotoriK commented Feb 9, 2021

add CPLUS_INCLUDE_PATH works fine on my M1 Mac. But not by using npm install directly, but run node-gyp rebuild after npm downloaded the package.
Also I found, links to those head files won't be recognized (even if in /usr/local/includes). Only clones of theme will be used. So the question might not be caused by homebrew.
That's weird since I successfully built canvas months ago. What is worth mentioned is Apple pushed an update for Developer Tools a few weeks earlier.
Checked Developer Tools version following this answer, and here is the output:

$ pkgutil --pkg-info=com.apple.pkg.CLTools_Executables
package-id: com.apple.pkg.CLTools_Executables
version: 12.4.0.0.1.1610135815
volume: /
location: /
install-time: 1612200617
groups: com.apple.FindSystemFiles.pkg-group

@kavience
Copy link

Hello, there.

I sovled this in my mac big sur(11.1), there is my steps:

  1. Use Rosetta open terminal
  2. uninstall and re-install node again
  3. use npm install node-canvas

The reasion is that Apple M1 is based on arm, then can't find canvas-v2.7.0-node-v72-darwin-unknown-arm64.tar.gz, cause there is only canvas-v2.7.0-node-v72-darwin-unknown-x64.tar.gz, so use Rosetta can solve it.

@RUSHt
Copy link

RUSHt commented Mar 28, 2021

This worked for me:-

arch -arm64 brew install pkg-config cairo pango libpng jpeg giflib librsvg

And then npm i canvas

@loan9202
Copy link

Hi @Glutch , Did you resolve the problem? and How did you fix it ? I got the same your problem but I cannot fix on Mac M1

@candostyavuz
Copy link

candostyavuz commented Aug 25, 2021

This worked for me:-

arch -arm64 brew install pkg-config cairo pango libpng jpeg giflib librsvg

And then npm i canvas

This saved my day... Thank you

@originalix
Copy link

originalix commented Sep 20, 2021

This worked for me:-

arch -arm64 brew install pkg-config cairo pango libpng jpeg giflib librsvg

And then npm i canvas

Thank you. That's worked for me!

@tukaz
Copy link

tukaz commented Oct 13, 2021

arch -arm64 brew install pkg-config cairo pango libpng jpeg giflib librsvg

this works perfect but now i have problems using jest commands. has anyone face something like this error ?

lucas.fiorini@lucas  % jest packages/ds-data-table/src/tests/render/toolbar.test.js 
 FAIL  packages/ds-data-table/src/tests/render/toolbar.test.js
  ● Test suite failed to run

    dlopen(/Users/x/node_modules/canvas/build/Release/canvas.node, 1): Symbol not found: _cairo_fill

@luizstacio
Copy link

Ok, I somehow got it to work but I really don't know what I changed... I assume you ran brew install pkg-config cairo pango libpng jpeg giflib librsvg at some point? The only thing I remember doing was running brew doctor once, then npm uninstall canvas and npm i canvas --save

Also be sure you ran xcode-select --installof course

I hope this helps you somehow, but as I said I really have no idea why suddenly everything works

Made this and worked here

@LinusU LinusU mentioned this issue Oct 17, 2021
1 task
@tansanDOTeth
Copy link

tansanDOTeth commented Nov 1, 2021

arch -arm64 brew install pkg-config cairo pango libpng jpeg giflib librsvg

this works perfect but now i have problems using jest commands. has anyone face something like this error ?

lucas.fiorini@lucas  % jest packages/ds-data-table/src/tests/render/toolbar.test.js 
 FAIL  packages/ds-data-table/src/tests/render/toolbar.test.js
  ● Test suite failed to run

    dlopen(/Users/x/node_modules/canvas/build/Release/canvas.node, 1): Symbol not found: _cairo_fill

did you figure out how to fix this?

I tried these in different orders, but could not fix the _cairo_fill issue.

arch -arm64 brew install pkg-config cairo pango libpng jpeg giflib librsvg
CPLUS_INCLUDE_PATH=/usr/local/include npm i canvas

@tukaz
Copy link

tukaz commented Nov 1, 2021

arch -arm64 brew install pkg-config cairo pango libpng jpeg giflib librsvg
this works perfect but now i have problems using jest commands. has anyone face something like this error ?

lucas.fiorini@lucas  % jest packages/ds-data-table/src/tests/render/toolbar.test.js 
 FAIL  packages/ds-data-table/src/tests/render/toolbar.test.js
  ● Test suite failed to run

    dlopen(/Users/x/node_modules/canvas/build/Release/canvas.node, 1): Symbol not found: _cairo_fill

did you figure out how to fix this?

I tried these in different orders, but could not fix the _cairo_fill issue.

arch -arm64 brew install pkg-config cairo pango libpng jpeg giflib librsvg
CPLUS_INCLUDE_PATH=/usr/local/include npm i canvas

I did actually. the problem was NVM or node it self. what i did was uninstall NVM completely following this:

nvm-sh/nvm#298

and then installed it following this article:

https://stackoverflow.com/questions/67254339/nvm-install-node-fails-to-install-on-macos-big-sur-m1-chip

good luck

@Rox0z
Copy link

Rox0z commented Nov 2, 2021

This worked for me:-

arch -arm64 brew install pkg-config cairo pango libpng jpeg giflib librsvg

And then npm i canvas

I tried this and worked flawlessly but I got incompatibility with other things, there's any way to reverse this installation? because there are other libs using those as dependency and I don't wanna break everything

@ruettenm
Copy link

brew install pkg-config cairo pango libpng jpeg giflib librsvg

worked for me.

@ghost
Copy link

ghost commented Sep 29, 2022

We are getting this when build the docker image. Do it needs more work to be done for docker build?

@illz
Copy link

illz commented Mar 30, 2023

I ran into a form of this issue, with variation-
Our codebase is running on Node 12.
Node v12 is only x86_64 - there is no arm64 build.
I spent a day or two trying to get node-canvas installed trying all sorts of variations until it finally all clicked.
If you are on a node version < v16 (m1 support), you have to run/build ALL your dependencies x86_64.

# this allowed me to take my existing v12.22 node_modules from my x86 and run successfully on my m1
​
​
# in ventura with the M1, homebrew will be installed, and install everything, in /opt/homebrew
# if you try to `arch=x86_64 brew install <....>`, brew will build, then error, saying 
# that it can't install any x86_64 in /opt/homebrew, you need to install them in /usr/local
# SO! we are going to add *a second, separate brew* installed in /usr/local for x86 builds
# This will allow us to build & install the x86_64 toolchain that the existing x86 node-canvas (installed in node_modules) will use# install:
# copy your existing x86 node v12 node_modules to your new machine (*do NOT run npm install from a fresh clone on the m1)

cd /usr/local
sudo mkdir homebrew
sudo chown $(whoami):admin homebrew
curl -L https://github.com/Homebrew/brew/tarball/master | tar xz --strip 1 -C homebrew
cd homebrew/bin
# this will take a long time, it builds a ton from source
arch -x86_64 ./brew install pixman pkg-config cairo pango libpng jpeg giflib librsvg
# running before adding this link threw an error that pixman could not be found (did not have it installed in arm64)
ln -sf /usr/local/homebrew/Cellar/pixman/0.42.2/lib/libpixman-1.0.dylib /usr/local/opt/pixman/lib/libpixman-1.0.dylib
# adding the above link caused node to look for all the other node-canvas dependencies in /usr/local/opt/
# so now we'll link /usr/local/opt to /usr/local/homebrew/opt
cd /usr/local
sudo ln -sf homebrew/opt/ opt
chown $(whoami):admin opt

Hope this helps someone - I realized that despite the same error, we're all trying to solve different variations of the problem depending if your project's node version is before or after 16 (arm64 support)

@Ruben-E
Copy link

Ruben-E commented Apr 21, 2023

Ran into the same issue. Nothing from here was able to fix it. Eventually I reinstalled the brew packages by building from source and that fixed it!

brew reinstall --build-from-source pkg-config cairo pango libpng jpeg giflib librsvg

I still don't know why... I suspect something with my homebrew installation is messed up.

@AndrewWebDev
Copy link

Nothing helped me, I stuck with the following:

bindings.ImageData.prototype.toString = function() {
                       ^

TypeError: **Cannot read properties of undefined** (reading 'prototype')
    at node_modules/canvas/lib/bindings.js

The issue with this part of the code:

// node_modules/canvas/lib/bindings.js
var require_bindings = __commonJS({
  "node_modules/canvas/lib/bindings.js"(exports, module2) {
    "use strict";
    
    // here, bindings is string
    var bindings = require_canvas();
    
    module2.exports = bindings;
    bindings.ImageData.prototype.toString = function() {
      return "[object ImageData]";
    };
    bindings.CanvasGradient.prototype.toString = function() {
      return "[object CanvasGradient]";
    };
  }
});

**bindings** is the string "canvas-2DT5DG63.node"

Use m1 pro, volta (try node 16.18.1, 18.16.0), use esbuild with options "--platform=node --loader:.node=file"

In my attempts perform these commands:

  1. brew install pkg-config cairo pango libpng jpeg giflib librsvg

  2. brew reinstall --build-from-source pkg-config cairo pango libpng jpeg giflib librsvg

  3. rm -rf node_modules

  4. CPLUS_INCLUDE_PATH=/opt/homebrew/include PKG_CONFIG_PATH=/opt/homebrew/lib/pkgconfig yarn add canvas

  5. CPLUS_INCLUDE_PATH=/opt/homebrew/include PKG_CONFIG_PATH=/opt/homebrew/lib/pkgconfig yarn install --frozen-lockfile

  6. npm install -g node-gyp

  7. CPLUS_INCLUDE_PATH=/opt/homebrew/include node-gyp rebuild

According to this comment all staff for arm64: (volta, node, canvas)
#1733 (comment)

@foochris
Copy link

Ran into the same issue. Nothing from here was able to fix it. Eventually I reinstalled the brew packages by building from source and that fixed it!

brew reinstall --build-from-source pkg-config cairo pango libpng jpeg giflib librsvg

I still don't know why... I suspect something with my homebrew installation is messed up.

I also had a similar issue, but instead ran the following with success:

 brew install pkg-config cairo pango libpng jpeg giflib librsvg

@mgacrama211176
Copy link

Ok, I somehow got it to work but I really don't know what I changed... I assume you ran brew install pkg-config cairo pango libpng jpeg giflib librsvg at some point? The only thing I remember doing was running brew doctor once, then npm uninstall canvas and npm i canvas --save

Also be sure you ran xcode-select --installof course

I hope this helps you somehow, but as I said I really have no idea why suddenly everything works

This worked for me... just dont forget to uninstall canvas then re install.

styfle added a commit to vercel/nft that referenced this issue Feb 2, 2024
This fixes an issue when a contributor runs `npm install` using Apple
Silicon which would fail since there is no precompiled arm64 binary to
download for `canvas`. The error looks like this:

```
npm ERR! node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-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.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz 
npm ERR! node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v108 ABI, unknown) (falling back to source compile with node-gyp) 
```

Since we don't have a [special
case](https://github.com/vercel/nft/blob/main/src/utils/special-cases.ts)
for `canvas` and it never worked with Vercel deployments, we can remove
the test.

It also doesn't decrease code coverage (in fact, I bumped code coverage
thresholds just to be sure).

### Related
- Automattic/node-canvas#1733
- vercel/vercel#3460
@jaydorsey
Copy link

jaydorsey commented Feb 21, 2024

I ran into a similar issue w/ a slightly different error message (errored on exception) but a google search led me to this thread as a top result for one of the error messages.

npm ERR! ../src/backend/Backend.h:5:10: fatal error: exception: No such file or directory
npm ERR!     5 | #include <exception>
npm ERR!       |          ^~~~~~~~~~~

Ran into a bunch of warnings about stuff not being linked in my output, and then I found this stackoverflow which made me check my gcc which was linking the macOS version, not the homebrew version, because homebrew doesn't automatically symlink gcc for you (they're all suffixed). I added a symlink and was able to npm install after that. Not 100% sure it's working correctly but will update if I find otherwise

macOS latest, m3 max, node 16.14.0

@Andre741
Copy link

For all those struggling with manually building the package on a Mac, besides brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman the build might fail.

With ModuleNotFoundError: No module named 'distutils' this happens as Python 3.12 has removed that module. To fix that install the brew install python-setuptools and then execute againpnpm rebuild canvas

@vaivai130
Copy link

vaivai130 commented Jun 3, 2024

Does anyone have problems with getting it to work in a CD/CI environment? I'm attempting to deploy node-canvas within firebase functions, and I get the above errors, even though it works fine locally.

gyp info spawn args '/layers/google.nodejs.yarn/yarn_modules/node_modules/node-canvas/build/config.gypi',
gyp info spawn args '-I',
gyp info spawn args '/layers/google.nodejs.runtime/node/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
gyp info spawn args '-I',
gyp info spawn args '/www-data-home/.cache/node-gyp/18.20.2/include/node/common.gypi',
gyp info spawn args '-Dlibrary=shared_library',
gyp info spawn args '-Dvisibility=default',
gyp info spawn args '-Dnode_root_dir=/www-data-home/.cache/node-gyp/18.20.2',
gyp info spawn args '-Dnode_gyp_dir=/layers/google.nodejs.runtime/node/lib/node_modules/npm/node_modules/node-gyp',
gyp info spawn args '-Dnode_lib_file=/www-data-home/.cache/node-gyp/18.20.2/<(target_arch)/node.lib',
gyp info spawn args '-Dmodule_root_dir=/layers/google.nodejs.yarn/yarn_modules/node_modules/node-canvas',
gyp info spawn args '-Dnode_engine=v8',
gyp info spawn args '--depth=.',
gyp info spawn args '--no-parallel',
gyp info spawn args '--generator-output',
gyp info spawn args 'build',
gyp info spawn args '-Goutput_dir=.'
gyp info spawn args ]
Package pangocairo was not found in the pkg-config search path.
Perhaps you should add the directory containing `pangocairo.pc'
to the PKG_CONFIG_PATH environment variable
No package 'pangocairo' found
gyp: Call to 'pkg-config pangocairo --libs' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1

@andotorg
Copy link

CPLUS_INCLUDE_PATH=/opt/homebrew/include yarn add canvas

It's really amazing. I always get 404 when using npm, but yarn succeeds. After deleting the lock file and npm_module, I used the command CPLUS_INCLUDE_PATH=/opt/homebrew/include yarn

@scatwang
Copy link

I got

Package 'zlib', required by 'cairo', not found

And this command works for me:

CPLUS_INCLUDE_PATH=/opt/homebrew/include PKG_CONFIG_PATH=/opt/homebrew/Homebrew/Library/Homebrew/os/mac/pkgconfig/14 yarn 

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests