Unexpected token in mapbox-gl/dist/mapbox-gl.js.map

[ajmas]

mapbox-gl version: 0.28.0 (latest version per npm) Operating System: Ubuntu 16.04.1 LTS npm version: 3.5.2 node version: 6.7.0

Failure:

$ ./node_modules/.bin/gulp build
[18:59:25] Using gulpfile ~/web/path-roots/map/gulpfile.js
[18:59:25] Starting 'watch'...
[18:59:25] Finished 'watch' after 23 ms
[18:59:25] Starting 'default'...
[18:59:25] Finished 'default' after 26 μs
---
11 :  * cubic in-out fashion.
12 :  *
13 :  * @private
14 :  */
15 : exports.easeCubicInOut = function(t: number): number {
                                        ^

Unexpected token (15:35)

This appears to be coming from mapbox-gl/dist/mapbox-gl.js.map and appears to be typescript related?

Current behaviour: failing build Expected behaviour: it build without error

I have tried removing the ~/web/path-roots/map/ directory, but that doesn't change anything. I also tried the head version of mapbox-gl-js and this caused me other errors of the same type.

The essential part of the package.json of the project:

  "dependencies": {
    "babelify": "^7.3.0",
    "gulp-sourcemaps": "^1.7.3",
    "jquery": "^3.1.1",
    "mapbox-gl": "^0.28.0",
    "polylabel": "^1.0.2",
    "semantic-ui-dimmer": "^2.2.3",
    "semantic-ui-modal": "^2.2.3",
    "semantic-ui-sidebar": "^2.2.3",
    "semantic-ui-transition": "^2.2.3",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.7.0"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.16.0",
    "browserify": "^13.1.0",
    "gulp": "^3.9.1"
  }

[jfirebaugh]

Hi @ajmas. Thanks for the report. Are you sure you're using the documented instructions for using Mapbox GL JS with other module systems? It looks like the error is not actually coming from mapbox-gl.js.map (which is a source map file and does not contain the source code referenced in the error message), but from trying to import util.js rather than the distribution build.

[ajmas]

Doing some more digging maybe this is more of a user error, but I am not sure of the cause - I can move this to StackExchange if you prefer.

Based on the suggestion you provided I have changed:

const mapboxgl = require('mapbox-gl');

to

const mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');

I now get errors of the form:

{ Error: Cannot find module './lib/geojson_wrapper' from '/Users/ajmas/Development/projects/cvmtl-webui/node_modules/mapbox-gl/dist'
    at /Users/ajmas/Development/projects/cvmtl-webui/node_modules/resolve/lib/async.js:55:21
    at load (/Users/ajmas/Development/projects/cvmtl-webui/node_modules/resolve/lib/async.js:69:43)
    at onex (/Users/ajmas/Development/projects/cvmtl-webui/node_modules/resolve/lib/async.js:92:31)
    at /Users/ajmas/Development/projects/cvmtl-webui/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:123:15)

The odd thing, is that while this fails on the Ubuntu machine, the require('mapbox-gl') version works on MacOS X 10.12, using node 6.7.0. The require('mapbox-gl/dist/mapbox-gl.js') format fails on both.

BTW Just seen, while the project does use Gulp, it is using Browserify. I see this in the gulpfile.js:

var bundler = watchify(browserify('./scripts/main.js', { debug: true }).transform(babel, {presets: ["es2015"]}));

[jfirebaugh]

Thanks for the clarification! If you are using Browserify, then require('mapbox-gl') should work. The flow annotations should be removed via the unflowify transform specified in package.json.

We unfortunately don't have the resources here to debug every build setup, so I have to ask that you continue poking at this yourself.