Can't install on Apple M1

[Glutch]

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

├── canvas@2.6.1
├─┬ editly@0.11.1
│ ├── canvas@2.6.1 deduped
│ └─┬ fabric@4.3.0
│ └── canvas@2.6.1 deduped
├─┬ text-to-image@2.4.4
│ └── canvas@2.6.1 deduped
└─┬ text2png@2.3.0
└── canvas@2.6.1 deduped

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

[timcreatedit]

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]

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]

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]

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 node-pre-gyp@0.11.0
npm ERR! node-pre-gyp info using node@15.4.0 | 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 canvas@2.6.1 and node@15.4.0 (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 node-gyp@7.1.2
npm ERR! gyp info using node@15.4.0 | darwin | arm64
npm ERR! gyp info ok 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@7.1.2
npm ERR! gyp info using node@15.4.0 | 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 node-gyp@7.1.2
npm ERR! gyp info using node@15.4.0 | 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]

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]

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]

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]

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]

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]

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]

@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]

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]

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]

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