Issue with geocoder@>2.0.0 and webpack

[vaiRk]

Edit: \ sorry, meant version >2.0.0 not 1.

Hey guys,

I've just upgraded to version 2.0.1 and came across an issue with Webpack. Before I was creating a dependencies bundle:

dependencies: [
    'leaflet',
    'esri-leaflet-geocoder'
]

That was enough for me to be able to access L.esri.Geocoding.

Since v2, Webpack is trying trying to pull the source files for the esri-leaflet-geocoder package which are not converted to ES5 hence failing. I added the package to the resolve.alias list so it points to the compiled file inside dist. This time I got the same error but with esri-leaflet, which the geocoder package is trying to require but is going for the source version rather than the dist one.

Tried adding esri-leaflet to the resolve alias list as well and even specifically adding it to the bundle. In every case webpack is able to build but L.esri is undefined.

Has anyone come across this issue and/or know how to solve it?

[patrickarlt]

Prior to version 2.0.0 we always declared the L.esri.Geocoding global variable. However shipping 2.0.0 as ES6 modules prevents us from declaring the global as before.

https://github.com/Esri/esri-leaflet-webpack-example is a working example with WebPack, Esri Leaflet and Esri Leaflet Geocoder that will use the babel-loader plugin compile the Esri Leaflet source on the fly with Babel.

Note that you also have to switch to using the CommonJS style syntax to load each peice of leaflet now. Like this https://github.com/Esri/esri-leaflet-webpack-example/blob/master/main.js#L18-L20

// require leaflet
var L = require('leaflet');
var esri = require('esri-leaflet');
var geocoding = require('esri-leaflet-geocoder');

// since leaflet is bundled into the browserify package it won't be able to detect where the images
// solution is to point it to where you host the the leaflet images yourself
L.Icon.Default.imagePath = 'http://cdn.leafletjs.com/leaflet-0.7.3/images';

[vaiRk]

Awesome, I'll give it a try. Thanks @patrickarlt!

[jgravois]

i'm going to assume pat's suggestion sorted you out, but feel free to write again if anything else comes up.

[vaiRk]

Yep! sorry, I thought he closed it after his answer. This is what I ended up doing in case anyone is interested:

On my webpack.config.js file I modified my exclude regexp to exclude any node_modules packages except the geocoder.

loaders: [
    {
        test: /\.jsx?$/,
    loader: 'babel?stage=0',
    exclude: [ new RegExp(nodeModulesPath + '\/(?!esri-leaflet-geocoder).*') ]
    }
]

Then:

import * as Geocoding from 'esri-leaflet-geocoder';
Geocoding.geosearch({...options}).addTo(map);

:+1:

[jgravois]

awesome. thanks for sharing!