Cannot read property 'extend' of at L.Routing.GraphHopper.js:10

[mspivak]

Hi there!

Angular 6 project here.

package.json

{ ...
    "leaflet": "^0.7.7",
    "leaflet-routing-machine": "^3.2.12",
    "lrm-graphhopper": "^1.3.0",
... }

HomeComponent.ts:

import * as L from 'leaflet';
import 'leaflet-routing-machine';
import 'lrm-graphhopper';

// ...

const plan = new L.Routing.Plan(waypoints, {});

const control = L.Routing.control({
  plan: plan,
  router: new L.Routing['GraphHopper']('', {
    serviceUrl: 'http://blablabla/route',
    allowUTurns: false
  },),
  fitSelectedRoutes: 'smart',
});

I'm getting Uncaught TypeError: Cannot read property 'extend' of at L.Routing.GraphHopper.js:10

On the browser.

Thoughts?

[perliedman]

Hi there, I am guessing there is a missing word undefined in the error message above?

These type of error usually come from the fact that a lot of old Leaflet plugins where written long before ES6 modules, Webpack and similar, and rely on Leaflet being defined as a global, window.L. Might it be the case that this global is not defined, as a result of your build environment?

I guess lrm-graphhopper should be modernized to handle this better, but since I am not actively using it myself, and have no plan on doing so any time soon, I am afraid I will not have the time to do it myself.

Happy to help out if you (or someone else) find the time to improve this, or if you even want to take over maintenance of it.