How to handle errors arising from Canvas compilation?

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 object-keys@0.4.0: 
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning "@angular/flex-layout@2.0.0-rc.1" has incorrect peer dependency "@angular/common@^2.2.3".
warning "@angular/flex-layout@2.0.0-rc.1" has incorrect peer dependency "@angular/core@^2.2.3".
warning "@angular/flex-layout@2.0.0-rc.1" has incorrect peer dependency "zone.js@^0.7.2".
warning "@ngtools/webpack@1.5.5" has incorrect peer dependency "enhanced-resolve@^3.1.0".
warning "@ngtools/webpack@1.5.5" has incorrect peer dependency "webpack@^2.2.0 || ^3.0.0".
warning "extract-text-webpack-plugin@2.1.2" has incorrect peer dependency "webpack@^2.2.0".
warning "html-webpack-plugin@2.30.1" has incorrect peer dependency "webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3".
warning "less-loader@4.0.5" has incorrect peer dependency "less@^2.3.1".
warning "less-loader@4.0.5" has incorrect peer dependency "webpack@^2.0.0 || ^3.0.0".
warning "sass-loader@6.0.6" has incorrect peer dependency "node-sass@^4.0.0".
warning "sass-loader@6.0.6" has incorrect peer dependency "webpack@^2.0.0 || >= 3.0.0-rc.0 || ^3.0.0".
warning "stylus-loader@3.0.1" has incorrect peer dependency "stylus@>=0.52.4".
warning "url-loader@0.5.9" has incorrect peer dependency "file-loader@*".
warning "webpack-dev-middleware@1.12.0" has incorrect peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
warning "webpack-dev-server@2.4.5" has incorrect peer dependency "webpack@^2.2.0".
warning "ajv-keywords@1.5.1" 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 node-gyp@3.6.2\ngyp info using node@8.7.0 | 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.
├─ brfs@1.4.3
├─ buffer-equal@0.0.1
├─ canvas-prebuilt@1.6.0
├─ compare-versions@3.1.0
├─ d3-array@1.2.1
├─ d3-collection@1.0.4
├─ d3-color@1.0.3
├─ d3-contour@1.1.1
├─ d3-dispatch@1.0.3
├─ d3-dsv@1.0.7
├─ d3-force@1.1.0
├─ d3-format@1.2.0
├─ d3-geo-projection@0.2.16
├─ d3-geo@1.9.0
├─ d3-hierarchy@1.1.5
├─ d3-interpolate@1.1.5
├─ d3-path@1.0.5
├─ d3-quadtree@1.0.3
├─ d3-queue@2.0.3
├─ d3-request@1.0.6
├─ d3-scale-chromatic@1.1.1
├─ d3-scale@1.0.6
├─ d3-selection@1.1.0
├─ d3-shape@1.2.0
├─ d3-time-format@2.1.0
├─ d3-time@1.0.7
├─ d3-timer@1.0.7
├─ d3-voronoi@1.1.2
├─ d3@3.5.17
├─ escodegen@1.3.3
├─ estraverse@1.5.1
├─ falafel@2.1.0
├─ foreach@2.0.5
├─ get-stream@3.0.0
├─ locate-path@2.0.0
├─ mem@1.1.0
├─ object-inspect@0.4.0
├─ object-keys@0.4.0
├─ p-finally@1.0.0
├─ p-limit@1.1.0
├─ p-locate@2.0.0
├─ quote-stream@1.0.2
├─ rw@1.3.3
├─ shallow-copy@0.0.1
├─ shapefile@0.3.1
├─ shebang-command@1.2.0
├─ shebang-regex@1.0.0
├─ static-eval@0.2.4
├─ static-module@1.5.0
├─ through2@0.4.2
├─ topojson@1.6.27
├─ vega-crossfilter@2.0.0
├─ vega-dataflow@3.0.3
├─ vega-datasets@1.10.0
├─ vega-embed@3.0.0-beta.20
├─ vega-encode@2.0.4
├─ vega-event-selector@2.0.0
├─ vega-expression@2.3.1
├─ vega-force@2.0.0
├─ vega-geo@2.1.1
├─ vega-hierarchy@2.1.0
├─ vega-lite@2.0.0-rc4
├─ vega-loader@2.0.2
├─ vega-parser@2.3.0
├─ vega-projection@1.0.0
├─ vega-runtime@2.0.0
├─ vega-scale@2.1.0
├─ vega-scenegraph@2.0.4
├─ vega-schema-url-parser@1.0.0-beta.3
├─ vega-statistics@1.2.1
├─ vega-transforms@1.1.1
├─ vega-util@1.6.0
├─ vega-view-transforms@1.1.0
├─ vega-view@2.0.3
├─ vega-voronoi@2.0.0
├─ vega-wordcloud@2.0.2
├─ vega@3.0.6
└─ xmlhttprequest@1.8.0
✨  Done in 15.24s.
Chads-MBP: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!