Gulp issues with cario install command not found when trying to installing canvas

Question

I'm fairly new to working in command line. I have a project that I'm setting up with gulp, and have gulp installed and compiling the sass files successfully. However, I cannot install canvas via:

$ npm install canvas

I need to install canvas because of the dependencies css-sprite has to run. I am getting the following error. I have installed cairo, quartz, and homebrew installed. I've researched other tickets and tried to run the export PKG_CONFIG_PATH=/opt/X11/lib/pkgconfig and install again. I've had no luck, and have no idea what else to do in attempts to troubleshoot.

Here is the error...

npm http GET https://registry.npmjs.org/canvas
npm http 304 https://registry.npmjs.org/canvas
npm http GET https://registry.npmjs.org/nan
npm http 304 https://registry.npmjs.org/nan

canvas@1.1.3 install /usr/local/lib/node_modules/canvas
node-gyp rebuild

./util/has_cairo_freetype.sh: line 4: pkg-config: command not found
gyp: Call to './util/has_cairo_freetype.sh' returned exit status 0.
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:337:16)
gyp ERR! stack     at ChildProcess.EventEmitter.emit (events.js:98:17)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:797:12)
gyp ERR! System Darwin 13.1.0
gyp ERR! command "node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /usr/local/lib/node_modules/canvas
gyp ERR! node -v v0.10.26
gyp ERR! node-gyp -v v0.12.2
gyp ERR! not ok 
npm ERR! canvas@1.1.3 install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the canvas@1.1.3 install script.
npm ERR! This is most likely a problem with the canvas package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node-gyp rebuild
npm ERR! You can get their info via:
npm ERR!     npm owner ls canvas
npm ERR! There is likely additional logging output above.

npm ERR! System Darwin 13.1.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "-g" "canvas"
npm ERR! cwd /Users/kylebebeau/websites/ls/code/templates/ls3
npm ERR! node -v v0.10.26
npm ERR! npm -v 1.4.3
npm ERR! code ELIFECYCLE
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/kylebebeau/websites/ls/code/templates/ls3/npm-debug.log
npm ERR! not ok code 0

Any help or guidance would be greatly appreciated.

Answer 1

I had this issue as well. I had also used brew to install cairo and quartz. I followed these instructions here and most specifically this step fixed my issue.

export PKG_CONFIG_PATH=/opt/X11/lib/pkgconfig

Make sure that you add this to your .bashrc or .zshrc if you want it to persist across sessions. I deleted my node_modules directory after successfully compiling and tried to npm install again in a new terminal session and I had to re-export that PKG_CONFIG_PATH to allow it to compile properly again.

Here is my output abbreviated to demonstrate.

$ npm install
> node-gyp rebuild
Package xcb-shm was not found in the pkg-config search path.
Perhaps you should add the directory containing `xcb-shm.pc'
to the PKG_CONFIG_PATH environment variable
Package 'xcb-shm', required by 'cairo', not found
gyp: Call to './util/has_cairo_freetype.sh' returned exit status 0. while trying to load binding.gyp
gyp ERR! configure error
...

$ export PKG_CONFIG_PATH=/opt/X11/lib/pkgconfig
$ npm install                            

$ canvas@1.1.3 install $HOME/projects/canvas/node_modules/canvas
$ node-gyp rebuild
...
Successful Compile

npm start worked without errors at this point

I hope this helps anyone else that runs into this.