import of npm-installed mapbox-gl in Meteor 1.4 fails

[igal1c0de4n]

Hote to reproduce

1. install meteor according to meteor.com

2. run:
   $ meteor create testMapboxGL
$ cd testMapboxGL

3. run:
   $ meteor npm i --save mapbox-gl

Note: this takes about five minutes to complete (why? other packages take a few seconds)
4. Edit client/main.js and add the line (at the top):
import mapboxgl from 'mapbox-gl';

5. launch meteor and see the result, for example:

$ meteor --port 7000
[[[[[ ~/learn/meteor/testMapboxGL ]]]]]

=> Started proxy.
=> Started MongoDB.

Unable to resolve some modules:

 "fs" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/node_modules/mapbox-gl-shaders/index.js (web.browser)
 "path" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/node_modules/mapbox-gl-shaders/index.js (web.browser)
 "net" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/node_modules/request/node_modules/tunnel-agent/index.js (web.browser)
 "url" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/js/util/mapbox.js (web.browser)
 "punycode" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/node_modules/request/node_modules/tough-cookie/lib/cookie.js (web.browser)
 "util" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/node_modules/mapbox-gl-style-spec/lib/error/validation_error.js (web.browser)
 "querystring" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/node_modules/request/node_modules/oauth-sign/index.js (web.browser)
 "canvas" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/node_modules/jsdom/lib/jsdom/utils.js (web.browser)
 "events" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/node_modules/jsdom/lib/jsdom/living/xhr-utils.js (web.browser)
 "string_decoder" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/node_modules/jsdom/node_modules/sax/lib/sax.js (web.browser)
 "stream" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/node_modules/jsdom/node_modules/sax/lib/sax.js (web.browser)
 "buffer" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/node_modules/request/node_modules/bl/node_modules/readable-stream/lib/_stream_writable.js (web.browser)
 "http" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/node_modules/request/node_modules/tunnel-agent/index.js (web.browser)
 "child_process" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js (web.browser)
 "crypto" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/node_modules/request/lib/oauth.js (web.browser)
 "https" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/node_modules/request/node_modules/tunnel-agent/index.js (web.browser)
 "zlib" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/node_modules/request/request.js (web.browser)
 "assert" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/js/render/painter/use_program.js (web.browser)
 "tls" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/node_modules/request/node_modules/tunnel-agent/index.js (web.browser)
 "vm" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js (web.browser)
 "os" in /Users/igal/learn/meteor/testMapboxGL/node_modules/mapbox-gl/node_modules/jsdom/lib/jsdom/living/navigator/NavigatorConcurrentHardware-impl.js (web.browser)

If you notice problems related to these missing modules, consider running:

 meteor npm install --save meteor-node-stubs canvas

=> Started your app.

=> App running at: http://localhost:7000/
/Users/igal/.meteor/packages/meteor-tool/.1.4.2.ya7j8e++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/isopackets/runtime/npm/node_modules/meteor/promise/node_modules/meteor-promise/promise_server.js:190
     throw error;
     ^

Note that at this point, trying to install the packages which seems to be missing using:
meteor npm i <apparent missing packages>

will result in a few packages which install correctly but then the install fails with:
npm ERR! Failed at the canvas@1.6.2 install script 'node-gyp rebuild'.

Expected behavior

The expected behavior would be that after the initial npm install mapbox-gl there would be no server side errors and that on the client side, the import of mapboxgl will result in a valid and ready to use mapboxgl object handle

[lucaswoj]

Including mapbox-gl naively from NPM is only supported in node and browserify build environments. Our instructions for using mapbox-gl in other build environments are here.

Please open a new ticket if you need any specific features to get mapbox-gl working with meteor. As far as I know, nobody on the Mapbox team has looked into using mapbox-gl with meteor!

[igal1c0de4n]

Not sure how to reply to that.

AFAIK any published npm package should load in Meteor w/o special requirements, and so should mapboxgl. If the package fails loading there's a problem in the package. Unfortunately I haven't figured out how to fix it myself. I'm hoping to get some help w/that

[mourner]

@igalitarian There are two problems here. The first is the install time — it will be fixed in the next release. See #3374. The second is the way you import mapbox-gl. If you look at the readme for build systems other than browserify, it suggests doing this instead:

import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';

[igal1c0de4n]

1. ok then, I'll try again after the next release

2. regarding the import method:
   Is there a reason for not supporting the more-simple import statement:

   import mapboxgl from 'mabox-gl';

   From what I've seen, this is how most packages are included.
   It should be quite easy, just add:

   "main": "dist/mapbox-gl.js"

   to package.json

[mourner]

@igalitarian fair point. I opened #3551 to discuss this.