npm install error (windows only) about esri-leaflet-vector HOT 21 CLOSED

i can't repro, even on Node 7.x.

in 'esri-leaflet-vector/node_modules/mapbox-gl/package.json', is the property below present?

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

from esri-leaflet-vector.

Yes, it's there. I tried it on another PC with a fresh GIT/Node install and got the same error. Perhaps a Windows issue?

from esri-leaflet-vector.

yeah, i can repro on windows 😢

from esri-leaflet-vector.

this is because the file rollup is looking for hasn't actually been created.

'node_modules/mapbox-gl/dist/mapbox-gl.js'

for the time being you should be able to edit the mapbox-gl package.json build script so that it stops calling npm run docs to resolve the problem.

"build": "browserify -d js/mapbox-gl.js --standalone mapboxgl > dist/mapbox-gl-dev.js && npm run docs",
// should be 
"build": "browserify -d js/mapbox-gl.js --standalone mapboxgl > dist/mapbox-gl-dev.js",

i'll try and find time soon to update our fork.

from esri-leaflet-vector.

Did this work for you? I'm getting the same error. Tried on both PCs.

from esri-leaflet-vector.

Did this work for you?

it did. what error do you encounter when you attempt to run npm run build inside the mapbox-gl folder?

from esri-leaflet-vector.

After installing Browserify I had no errors running npm run build. Still got the errors with npm install though.

Then I changed the line

"build": "browserify -d js/mapbox-gl.js --standalone mapboxgl > dist/mapbox-gl-dev.js",

to

 "build": "browserify -d js/mapbox-gl.js --standalone mapboxgl > dist/mapbox-gl.js",

in the mapbox-gl package.json build file. This allowed npm install to run with just a few warnings.

from esri-leaflet-vector.

argh. i don't know what i was talking about yesterday afternoon.

production is actually the mapbox script that generates a 'dist/mapbox-gl.js' file. please revert the build command to what i suggested previously, and try calling npm run prepublish manually. this will execute both the build and production scripts.

https://github.com/Esri/mapbox-gl-js/blob/14946c8739bb238899ae6de102e35e2a82bd5b40/package.json#L70-L72

afterward you should be able to get your local dev environment set up successfully.

from esri-leaflet-vector.

I got the dev environment setup successfully. Here are my steps:

1. Fork and clone this repository.
2. Run npm install in esri-leaflet-vector folder. This will throw errors but create the node_modules folder (dependancies).
3. Go into ~esri-leaflet-vector\node_modules\mapbox-gl folder and modify the package.json file to remove the "&& npm run docs" - as mentioned above.
4. From the same folder run "npm run prepublish".
5. Go into ~esri-leaflet-vector\node_modules\mapbox-gl-leaflet folder and modify line 151 of leaflet-mapbox.gl.js to be gl._update() instead of gl.update().
6. Go back to the esri-leaflet-vector folder and run npm install again.

I was then able to run the sample.html file successfully as well as make changes to the source files and build. Thanks John for all your help.

from esri-leaflet-vector.

@shadc can you handle making a pull request to tackle the first item on the to-do list below?

• remove && npm run docs from the 'prepublish' script in Esri/mapbox-gl-js#indexed-vector-sources
• migrate dependency to mapbox/mapbox-gl-leaflet, since its now _update() vs. update() agnostic. (done in deb2de6)

once both these are done, the project should be plug and play for the next windows dev that comes along and we can safely close this issue.

from esri-leaflet-vector.

@jgravois - not sure that simply removing the && npm run docs will resolve the issue. I still have to go into the mapbox-gl module and run npm run prepublish to get it to work as expected. I also have to install browserify.js before the npm run prepublish. I also can leave the && npm run docs in the script as long as I also install documentation.js first, however it throws an error saying it can't find the specified theme (./docs/_theme). I apologize for my lack of experience with node/npm if I'm completely wrong about this, but it appears that several dependencies (browserify.js, documentation.js, etc) are not being installed for mapbox-gl to build successfully?

from esri-leaflet-vector.

I apologize for my lack of experience

no need! lets test something totally different:

what happens if you leave all the install scripts and 'devDependencies' in the package.json of your local copy of mapbox-gl alone and just update the jsnext:main to point at 'js/mapbox-gl.js'?

from esri-leaflet-vector.

That worked! There is not a mapbox-gl.js file in my dist folder. Should I make a pull request with this change or do you want to test more?

from esri-leaflet-vector.

Should I make a pull request with this change?

Yes please! since we are pulling down a raw commit hash and using rollup to generate our final .js bundle. i think its fine to just point at the raw source that is already checked into version control.

from esri-leaflet-vector.

Arggg... spoke too soon. Errors when running sample.html in js/mapbox-gl.js when modifying jsnext:main. When I run the npm run prepublish, as previously described, it does create the mapbox-gl.js file (and mapbox-gl-dev.js) in the dist folder, but it's contents are completely different. The sample.html also works as expected.

from esri-leaflet-vector.

i have yet another suggestion for setting up a windows dev environment. lets try not using rollup to bundle 'mapbox-gl' and just including it as an external dependency.

on my windows VM this was sufficient to get the plugin to build and fix the 403 errors and inappropriate display behavior on screen.

two changes are necessary.

// profiles/base.js
config.external = ['leaflet', 'esri-leaflet', 'mapbox-gl'];
config.globals = {
  'leaflet': 'L',
  'esri-leaflet': 'L.esri',
  'mapbox-gl': 'L.mapboxGL'
}

export default config;

<!-- debug/sample.html -->
<script src="https://rawgit.com/jgravois/mapbox-gl-js/add-built/dist/mapbox-gl.js"></script>

can you give that a go and let me know how it works for you please?

from esri-leaflet-vector.

its worth noting something inexplicable about the builds i've been creating successfully up until now.

my technique has been to point rollup at "jsnext:main": "dist/mapbox-gl.js" even though the source is not written in ES6, but rather (UMD?) output from browserify.

thinking that the raw "main": "js/mapbox-gl.js" is commonJS, i tried to get rollup to recognize it as such via its own plugin, but found no joy.

// main.js
import 'mapbox-gl';

//rollup.js
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
  entry: 'main.js',
  moduleName: 'foo',
  format: 'umd',
  plugins: [
    nodeResolve({
      jsnext: false, // default
      main: true, // default
      browser: false, // default
      extensions: [ '.js', '.json' ]
    }),
    commonjs()
  ]
};

generates ...

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (factory());
}(this, function () { 'use strict';

    /**
     * mapboxgl is a A WebGL JavaScript interactive maps library that can render
     * [Mapbox vector tiles](https://www.mapbox.com/blog/vector-tiles/).
     *
     * @module mapboxgl
     * @summary WebGL JavaScript map library
     */

    // jshint -W079
    var mapboxgl = module.exports = {};

    mapboxgl.Map = require('./ui/map');
    mapboxgl.Control = require('./ui/control/control');
    mapboxgl.Navigation = require('./ui/control/navigation');
    mapboxgl.Attribution = require('./ui/control/attribution');
    // ...
    // the problem is that the code referenced within the require()s isn't included in the bundle

ref: mapbox/mapbox-gl-js/issues/3767

but here's the strange part.

when i decided to just check an already built copy of dist/mapbox-gl.js into source control i noticed that the presence of the file is the very thing that causes corrupt builds that fetch nonexistent tiles and display inappropriate visual artifacts. #24

that is to say that rollup can only use jsnext:main to bundle mapbox-gl when the file it references is not present on disk!

from esri-leaflet-vector.

@jgravois - I appended the code you provided to profiles/base.js and was able to successfully build. I then added the .js reference to sample.html. Unfortunately, it still renders funky and throws errors.

// profiles/base.js
import config from '../node_modules/esri-leaflet/profiles/base.js';
import nodeResolve from 'rollup-plugin-node-resolve';

config.entry = 'src/EsriLeafletVector.js';
config.moduleName = 'L.esri.Vector';

// to do: try and wrap ol' mapbox-gl w/o a jsnext:main field
config.plugins[0] = nodeResolve({
  jsnext: true,
  main: true,
  browser: false,
  extensions: [ '.js', '.json' ]
});

config.external = ['leaflet', 'esri-leaflet', 'mapbox-gl'];
config.globals = {
  'leaflet': 'L',
  'esri-leaflet': 'L.esri',
  'mapbox-gl': 'L.mapboxGL'
}

export default config;

<!-- debug/sample.html -->
<html>
<head>
    <title>Esri Vector Basemaps</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Leaflet -->
    <script src="https://cdn.jsdelivr.net/leaflet/1.0.2/leaflet-src.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.2/leaflet.css">



    <!-- Esri Leaflet -->
    <script src="../node_modules/esri-leaflet/dist/esri-leaflet-debug.js"></script>

    <script src="../dist/esri-leaflet-vector-debug.js"></script>

    <script src="https://rawgit.com/jgravois/mapbox-gl-js/add-built/dist/mapbox-gl.js"></script>

    <style>
      html, body {
        margin: 0;
      }

      #map {
        width: 100%;
        height: 100%;
      }
    </style>
</head>

<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([45.526, -122.667], 3);

// esri hosted basemap
// L.esri.Vector.basemap('Topographic').addTo(map);

// custom hosted basemap
L.esri.Vector.layer('bd505ce3efff479bb4e87b182f180159').addTo(map);

// custom ArcGIS Pro published vector service
// http://www.arcgis.com/home/item.html?id=0bac0ffdc8634d9a9bc662bb8fa7547d
// L.esri.Vector.layer('0bac0ffdc8634d9a9bc662bb8fa7547d').addTo(map);
</script>
</body>
</html>

from esri-leaflet-vector.

Unfortunately, it still renders funky and throws errors.

ugh. i can reproduce the same thing. i'm stumped (for the moment anyway).

from esri-leaflet-vector.

@jgravois I know this is a long thread at this point and I may have missed something, but I'm getting errors when trying to do npm install on Windows 10: Error: Could not resolve 'mapbox-gl' from C:\....\esri-leaflet-vector\src\Util.js

λ node -v
v8.9.0
λ npm -v
5.6.0

C:\....\esri-leaflet-vector (master) ([email protected])
λ npm install
npm WARN prepublish-on-install As of npm@5, `prepublish` scripts are deprecated.
npm WARN prepublish-on-install Use `prepare` for build steps and `prepublishOnly` for upload-only.
npm WARN prepublish-on-install See the deprecation note in `npm help scripts` for more information.

> [email protected] prepublish C:\....\esri-leaflet-vector
> npm run build


> [email protected] prebuild C:\....\esri-leaflet-vector
> mkdirp dist


> [email protected] build C:\....\esri-leaflet-vector
> rollup -c profiles/debug.js & rollup -c profiles/production.js

Could not resolve 'mapbox-gl' from C:\....\esri-leaflet-vector\src\Util.js
Error: Could not resolve 'mapbox-gl' from C:\....\esri-leaflet-vector\src\Util.js
    at C:\....\esri-leaflet-vector\node_modules\rollup-plugin-node-resolve\dist\rollup-plugin-node-resolve.cjs.js:77:21
    at C:\....\esri-leaflet-vector\node_modules\resolve\lib\async.js:50:13
    at processDirs (C:\....\esri-leaflet-vector\node_modules\resolve\lib\async.js:182:39)
    at ondir (C:\....\esri-leaflet-vector\node_modules\resolve\lib\async.js:197:13)
    at load (C:\....\esri-leaflet-vector\node_modules\resolve\lib\async.js:80:43)
    at onex (C:\....\esri-leaflet-vector\node_modules\resolve\lib\async.js:105:17)
    at C:\....\esri-leaflet-vector\node_modules\resolve\lib\async.js:26:73
    at FSReqWrap.oncomplete (fs.js:152:21)
Type rollup --help for help, or visit https://github.com/rollup/rollup/wiki
Could not resolve 'mapbox-gl' from C:\....\esri-leaflet-vector\src\Util.js
Error: Could not resolve 'mapbox-gl' from C:\....\esri-leaflet-vector\src\Util.js
    at C:\....\esri-leaflet-vector\node_modules\rollup-plugin-node-resolve\dist\rollup-plugin-node-resolve.cjs.js:77:21
    at C:\....\esri-leaflet-vector\node_modules\resolve\lib\async.js:50:13
    at processDirs (C:\....\esri-leaflet-vector\node_modules\resolve\lib\async.js:182:39)
    at ondir (C:\....\esri-leaflet-vector\node_modules\resolve\lib\async.js:197:13)
    at load (C:\....\esri-leaflet-vector\node_modules\resolve\lib\async.js:80:43)
    at onex (C:\....\esri-leaflet-vector\node_modules\resolve\lib\async.js:105:17)
    at C:\....\esri-leaflet-vector\node_modules\resolve\lib\async.js:26:73
    at FSReqWrap.oncomplete (fs.js:152:21)
Type rollup --help for help, or visit https://github.com/rollup/rollup/wiki
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `rollup -c profiles/debug.js & rollup -c profiles/production.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\[USERNAME]\AppData\Roaming\npm-cache\_logs\2018-02-15T14_58_56_933Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] prepublish: `npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] prepublish script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\[USERNAME]\AppData\Roaming\npm-cache\_logs\2018-02-15T14_58_56_967Z-debug.log

Is this consistent with this issue or a separate issue? Any way I can help debug?

from esri-leaflet-vector.

i took a look at this project for the first time in awhile a couple weeks ago and now i can't even npm install && npm build on my mac. 😿

a fresh set of eyes never hurts, but given the hackish nature of this plugin (my fault) and trying to syncronize a WebGL w/ Leaflet in general, don't let it turn into a time sink.

from esri-leaflet-vector.