Vega: How to handle errors arising from Canvas compilation?

[chadbr]

I get errors trying to add vega-embed to my project on mac osx 10.13 (high sierra)

Anyone have any ideas?

Chads-MBP:kinetix-ui chadbr$ yarn add vega-embed
yarn add v1.0.0
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
warning [email protected]: 
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning "@angular/[email protected]" has incorrect peer dependency "@angular/common@^2.2.3".
warning "@angular/[email protected]" has incorrect peer dependency "@angular/core@^2.2.3".
warning "@angular/[email protected]" has incorrect peer dependency "zone.js@^0.7.2".
warning "@ngtools/[email protected]" has incorrect peer dependency "enhanced-resolve@^3.1.0".
warning "@ngtools/[email protected]" has incorrect peer dependency "webpack@^2.2.0 || ^3.0.0".
warning "[email protected]" has incorrect peer dependency "webpack@^2.2.0".
warning "[email protected]" has incorrect peer dependency "webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3".
warning "[email protected]" has incorrect peer dependency "less@^2.3.1".
warning "[email protected]" has incorrect peer dependency "webpack@^2.0.0 || ^3.0.0".
warning "[email protected]" has incorrect peer dependency "node-sass@^4.0.0".
warning "[email protected]" has incorrect peer dependency "webpack@^2.0.0 || >= 3.0.0-rc.0 || ^3.0.0".
warning "[email protected]" has incorrect peer dependency "stylus@>=0.52.4".
warning "[email protected]" has incorrect peer dependency "file-loader@*".
warning "[email protected]" has incorrect peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
warning "[email protected]" has incorrect peer dependency "webpack@^2.2.0".
warning "[email protected]" has incorrect peer dependency "ajv@>=4.10.0".
[5/5] 📃  Building fresh packages...
[1/2] ⠠ canvas: '-Goutput_dir=.' ]
[2/2] ⠠ canvas-prebuilt: node-pre-gyp http GET https://github.com/chearon/node-canvas-prebuilt/releases/download/v1.6.0/canvas-prebuil
[-/2] ⠠ waiting...
[-/2] ⠠ waiting...
warning Error running install script for optional dependency: "/Users/chadbr/dev/vsts/kinetix-
ui/node_modules/canvas: Command failed.\nExit code: 1\nCommand: node-gyp rebuild\nArguments: 
\nDirectory: /Users/chadbr/dev/vsts/kinetix-ui/node_modules/canvas\nOutput:\ngyp info it worked if 
it ends with ok\ngyp info using [email protected]\ngyp info using [email protected] | darwin | x64\ngyp 
info spawn /Library/Frameworks/Python.framework/Versions/2.7/bin/python2\ngyp info spawn args [ 
'/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',\ngyp info spawn args   
'binding.gyp',\ngyp info spawn args   '-f',\ngyp info spawn args   'make',\ngyp info spawn args   '-
I',\ngyp info spawn args   '/Users/chadbr/dev/vsts/kinetix-
ui/node_modules/canvas/build/config.gypi',\ngyp info spawn args   '-I',\ngyp info spawn args   
'/usr/local/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',\ngyp info spawn args   '-
I',\ngyp info spawn args   '/Users/chadbr/.node-gyp/8.7.0/include/node/common.gypi',\ngyp info 
spawn args   '-Dlibrary=shared_library',\ngyp info spawn args   '-Dvisibility=default',\ngyp info 
spawn args   '-Dnode_root_dir=/Users/chadbr/.node-gyp/8.7.0',\ngyp info spawn args   '-
Dnode_gyp_dir=/usr/local/lib/node_modules/npm/node_modules/node-gyp',\ngyp info spawn args   
'-Dnode_lib_file=/Users/chadbr/.node-gyp/8.7.0/<(target_arch)/node.lib',\ngyp info spawn args   '-
Dmodule_root_dir=/Users/chadbr/dev/vsts/kinetix-ui/node_modules/canvas',\ngyp info spawn args   
'-Dnode_engine=v8',\ngyp info spawn args   '--depth=.',\ngyp info spawn args   '--no-parallel',\ngyp 
info spawn args   '--generator-output',\ngyp info spawn args   'build',\ngyp info spawn args   '-
Goutput_dir=.' ]\n./util/has_lib.sh: line 31: pkg-config: command not found\ngyp: Call to 
'./util/has_lib.sh freetype' returned exit status 0 while in binding.gyp. while trying to load 
binding.gyp\ngyp ERR! configure error \ngyp ERR! stack Error: `gyp` failed with exit code: 1\ngyp 
ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-
gyp/lib/configure.js:336:16)\ngyp ERR! stack     at emitTwo (events.js:125:13)\ngyp ERR! stack     at 
ChildProcess.emit (events.js:213:7)\ngyp ERR! stack     at Process.ChildProcess._handle.onexit 
(internal/child_process.js:200:12success Saved lockfile.
success Saved 78 new dependencies.
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 15.24s.
Chads-MBP:kinetix-ui chadbr$ 

[icyretribution]

you need python2 and the gcc-c++ packages to effectively run node-gyp

[chadbr]

yea, I've had no issues with other node-gyp packages...

python2 has been on my system forever (2.7.x) -- upgraded gcc to the latest, no help.

[jheer]

This sounds like a known problem with yarn and node-gyp (for example, see https://github.com/yarnpkg/yarn/issues/3728).

One possible fix:

• Run npm install -g node-gyp then retry yarn.

Or a possible workaround:

• Try npm install in the Vega folder instead of yarn.

Please let us know if you are able to make progress using either of those methods!

[chadbr]

thanks for the recommendation -- similar results with npm with prettier errors

It's an optional dependency so it's not fatal... just annoying.

Chads-MacBook-Pro:kinetix-ui chadbr$ sudo npm i -g npm
Password:
/usr/local/bin/npx -> /usr/local/lib/node_modules/npm/bin/npx-cli.js
/usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
+ [email protected]
added 52 packages, removed 2 packages and updated 29 packages in 8.005s
Chads-MacBook-Pro:kinetix-ui chadbr$ npm install

> [email protected] install /Users/chadbr/dev/vsts/kinetix-ui/node_modules/canvas
> node-gyp rebuild

./util/has_lib.sh: line 31: pkg-config: command not found
gyp: Call to './util/has_lib.sh freetype' returned exit status 0 while in binding.gyp. while trying to load binding.gyp
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:336:16)
gyp ERR! stack     at emitTwo (events.js:125:13)
gyp ERR! stack     at ChildProcess.emit (events.js:213:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Darwin 17.0.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/chadbr/dev/vsts/kinetix-ui/node_modules/canvas
gyp ERR! node -v v8.7.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok 
npm WARN The package karma-junit-reporter is included as both a dev and production dependency.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/canvas):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: `node-gyp rebuild`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

2 strange things:

the error above has a reference to gyp ERR! cwd /Users/chadbr/dev/vsts/kinetix-ui/node_modules/canvas

that directory doesn't exist (since it's using canvas-prebuilt) -- so I don't know where / why it would be looking for that directory.

when I run the command from the error - it says it can't find binding.gyp - but it doesn't say where it's looking for it... maybe that canvas directory?

Chads-MacBook-Pro:kinetix-ui chadbr$ "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | darwin | x64
gyp info spawn /Library/Frameworks/Python.framework/Versions/2.7/bin/python2
gyp info spawn args [ '/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/chadbr/dev/vsts/kinetix-ui/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/usr/local/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/chadbr/.node-gyp/8.7.0/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/Users/chadbr/.node-gyp/8.7.0',
gyp info spawn args   '-Dnode_gyp_dir=/usr/local/lib/node_modules/npm/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/Users/chadbr/.node-gyp/8.7.0/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/Users/chadbr/dev/vsts/kinetix-ui',
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: binding.gyp not found (cwd: /Users/chadbr/dev/vsts/kinetix-ui) while trying to load binding.gyp
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:336:16)
gyp ERR! stack     at emitTwo (events.js:125:13)
gyp ERR! stack     at ChildProcess.emit (events.js:213:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Darwin 17.0.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/chadbr/dev/vsts/kinetix-ui
gyp ERR! node -v v8.7.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok 
Chads-MacBook-Pro:kinetix-ui chadbr$ find . | grep binding.gyp
./node_modules/canvas-prebuilt/ci/osx/binding.gyp
./node_modules/canvas-prebuilt/ci/win/binding.gyp
./node_modules/canvas-prebuilt/ci/linux/binding.gyp
./node_modules/canvas-prebuilt/canvas/binding.gyp
./node_modules/node-sass/binding.gyp
./node_modules/fsevents/binding.gyp
Chads-MacBook-Pro:kinetix-ui chadbr$ 

[chadbr]

hurrah! and good golly --

This fixed it:

brew install pkg-config cairo libpng jpeg giflib

I found that in the canvas-prebuilt/canvas readme...

that's a long road... :/

is it really needed if it's an optional install?

Thanks - Chad

[jheer]

Canvas is "optional" in the sense that Vega can run without it.

However, Canvas is used to compute font metrics. If it is not available, Vega falls back on some approximations that in some cases can lead to different bounding box and downstream layout calculations...

Various users over the years requested that it be made optional to enable graceful degradation when canvas installation fails, or when one is only concerned about browser deployment (at which point HTML canvas is available).

In any case, I'm glad you found the solution!