Error installing npm package (node-gyp)

[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 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$ 

[domoritz]

Canvas is used for tests. It's a known problem with Vega. Please report any issues there.