"Uncaught TypeError: t.draggableLines.enableForLayer is not a function" (Leaflet.DraggableLines is broken in production)

[lehnerpat]

When trying to edit the track path in editing mode, nothing happens and the following error is printed in the browser console:

Uncaught TypeError: t.draggableLines.enableForLayer is not a function

It seems something breaks with DraggableLines in production, possibly an issue with minification.

[lehnerpat]

I've tracked this a little bit.
Because of our browserslist selection of browser compatibility (default from CRA), the dev build only targets very modern browsers, while the prod build targets a wider range of browsers. As a result, the underlying webpack build produces ES6 output for dev, but ES5 for prod.

In the ES5 prod build, most methods of the DraggableLinesHandler class from Leaflet.DraggableLines are not accessible. When instantiating it, the compiled code simply doesn't correctly use the prototype built from the class definition.

I don't know yet why this happens, it could possibly be a compilation bug, though these are generally unlikely. I'll continue investigating again at a later point.

[lehnerpat]

One hypothesis I have is that mixing the ES6/TS class-based inheritance you use in DraggableLinesHandler with Leaflet's custom-built class system somehow confuses the Babel transpiler or something.
I'm planning to test this by adding another simple subclass of Handler in my own code, and see if it shows the same behavior, and then possibly also trying to change DraggableLinesHandler to use Leaflet's L.Class.extend() instead of ES6 classes.