TypeError: leaflet__WEBPACK_IMPORTED_MODULE_3___default.a.Control.Draw is not a constructor

[priyankagupta34]

Not sure if this one is bug or nor. `

    var editableLayers = new L.FeatureGroup();
    this.map.addLayer(editableLayers);

    var MyCustomMarker = L.Icon.extend({
        options: {
            shadowUrl: null,
            iconAnchor: new L.Point(12, 12),
            iconSize: new L.Point(24, 24),
            iconUrl: 'link/to/image.png'
        }
    });

    var options = {
        position: 'topright',
        draw: {
            polyline: {
                shapeOptions: {
                    color: '#f357a1',
                    weight: 10
                }
            },
            polygon: {
                allowIntersection: false, // Restricts shapes to simple polygons
                drawError: {
                    color: '#e1e100', // Color the shape will turn when intersects
                    message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
                },
                shapeOptions: {
                    color: '#bada55'
                }
            },
            circle: false, // Turns off this drawing tool
            rectangle: {
                shapeOptions: {
                    clickable: false
                }
            },
            marker: {
                icon: new MyCustomMarker()
            }
        },
        edit: {
            featureGroup: editableLayers, //REQUIRED!!
            remove: false
        }
    };

    var drawControl = new L.Control.Draw(options);
    this.map.addControl(drawControl);

    this.map.on(L.Draw.Event.CREATED, function (e) {
        var type = e.layerType,
            layer = e.layer;

        if (type === 'marker') {
            layer.bindPopup('A popup!');
        }

        editableLayers.addLayer(layer);
    });

`

---

Its throwing with 1.0.4 version of Leaflet.draw

[priyankagupta34]

This was my problem, i should have included the js explicitly for its availability to the react dom

[kunKun-tx]

In case anyone is wondering, this is the way i import leaflet, leaflet-esri, and leaflet-draw in CRA, should work on other webpack configuration once you have css-loader set up.

import L from "leaflet"
import "leaflet/dist/leaflet.css"
import * as esri from "esri-leaflet"
import "leaflet-draw"
import "leaflet-draw/dist/leaflet.draw.css"

import marker from "leaflet/dist/images/marker-icon.png"
import marker2x from "leaflet/dist/images/marker-icon-2x.png"
import markerShadow from "leaflet/dist/images/marker-shadow.png"

delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
  iconRetinaUrl: marker2x,
  iconUrl: marker,
  shadowUrl: markerShadow,
})

L.esri = esri