basemapLayer: Cannot set property 'innerHTML' of null in React app

Chrome 57.0.2987.133 (64-bit), Safari 10.1 Using NPM/Node/Webpack and React:

“esri-leaflet”: “^2.0.8”, “leaflet”: “^1.0.3”,

The single line of code utilizing esri-leaflet is for sure the culprit, as removing it (and thus the baselayer of my maps) stops the error from popping up in the developer console in Chrome and Safari. Everything seems to be functioning alright, but my console is inundated with these errors, and I need to remove them to make this a production-ready application.

VM20550:819 Uncaught TypeError: Cannot set property 'innerHTML' of null
    at _updateMapAttribution (eval at <anonymous> (http://localhost:10099/bundle-993595c0a6d1bc0978ee.js:1:1381880), <anonymous>:819:35)
    at eval (eval at <anonymous> (http://localhost:10099/bundle-993595c0a6d1bc0978ee.js:1:1381880), <anonymous>:790:6)
    at Object.window._EsriLeafletCallbacks.(anonymous function) [as c3] (eval at <anonymous> (http://localhost:10099/bundle-993595c0a6d1bc0978ee.js:1:1381880), <anonymous>:202:17)
    at https://static.arcgis.com/attribution/World_Topo_Map?callback=window._EsriLeafletCallbacks.c3&f=json:1:30
_updateMapAttribution @ VM20550:819
(anonymous) @ VM20550:790
window._EsriLeafletCallbacks.(anonymous function) @ VM20550:202
(anonymous) @ World_Topo_Map?callback=window._EsriLeafletCallbacks.c3&f=json:1

Steps to reproduce the error:

1. Create a map with leaflet in React component:

import L from ‘leaflet’ import E from ‘esri-leaflet’

Offending line: // E.basemapLayer(esriBasemapLayer).addTo(this.map); where: esriBasemapLayer = “Topographic”;

I took a lot of time to create a vanilla Node/Webpack/React project to reproduce this error as simply as possible, but unfortunately, I haven’t been able to reproduce the problem in a stripped down way.

So I am resorting to showing the majority of my React component:

import React from 'react'
import ReactDOM from 'react-dom'
import L from 'leaflet'
import E from 'esri-leaflet'

export class Map extends React.Component {
    render() {
        const { esriBasemapLayer, geoJSONData, clickEventDetail, clickPictureDetail } = this.props;
        return (
            <div className={Styles.Map}>
                <div ref={() => this.renderMap(esriBasemapLayer, geoJSONData, clickEventDetail, clickPictureDetail)} />
            </div>
        )
    }
    renderMap(esriBasemapLayer, geoJSONData, clickEventDetail, clickPictureDetail) {
        if (this.map) {
            this.map.remove();
        }
        let mapContainer = ReactDOM.findDOMNode(this);

        // configure default marker map icons
        delete L.Icon.Default.prototype._getIconUrl;
        L.Icon.Default.mergeOptions({
            iconRetinaUrl: require("../img/leaflet/marker-icon-2x.png"),
            iconUrl: require("../img/leaflet/marker-icon.png"),
            shadowUrl: require("../img/leaflet/marker-shadow.png")
        });

        let eventMarkerIcon = L.icon({
            iconRetinaUrl: require("../img/leaflet/marker-event.png"),
            iconUrl: require("../img/leaflet/marker-event.png"),
            // shadowUrl: require("../img/leaflet/marker-event-shadow.png"),
            iconSize: [30, 27],   // size of the icon
            shadowSize: [30, 27], // size of the shadow
            iconAnchor: [15, 14], // point of the icon which will correspond to the marker's location
            shadowAnchor: [15, 14], // the same for the shadow
            popupAnchor: [0, -27], // point from which the popup should open relative to the iconAnchor
        });

        let pictureMarkerIcon = L.icon({
            iconRetinaUrl: require("../img/leaflet/marker-picture.png"),
            iconUrl: require("../img/leaflet/marker-picture.png"),
            // shadowUrl: require("../img/leaflet/marker-event-shadow.png"),
            iconSize: [32, 32],   // size of the icon
            shadowSize: [32, 32], // size of the shadow
            iconAnchor: [16, 16], // point of the icon which will correspond to the marker's location
            shadowAnchor: [16, 16], // the same for the shadow
            popupAnchor: [0, -32], // point from which the popup should open relative to the iconAnchor
        });

        this.map = L.map(mapContainer);

        // configure map control settings
        this.map.scrollWheelZoom.disable();
        this.map.keyboard.disable();

        // THIS LINE CAUSES THE ERROR
        E.basemapLayer(esriBasemapLayer).addTo(this.map);
        
        const geoJSON = L.geoJSON(geoJSONData, {
            pointToLayer: (feature, latlng) => {
                console.log("feature:", feature);
                if(feature.properties.name === "Event") {
                    return L.marker(latlng, {icon: eventMarkerIcon});
                }
                else if(feature.properties.name === "Picture") {
                    return L.marker(latlng, {icon: pictureMarkerIcon});
                }
                else {
                    return L.Icon.Default;
                }
            },
            onEachFeature: (feature, layer) => {
                console.log("EventDetail::onEachFeature");
                const popupImgSrc = feature.properties.imgSrc;
                const popupImg = "<img class=\""+ Styles.popupImg +"\" src=\""+popupImgSrc+"\"/>";
                const popupDescription = "<div class=\""+ Styles.popupDescription +"\">"+feature.properties.description+"</div>";
                const popup = "<div class=\""+ Styles.popup +"\">"+ popupImg + popupDescription +"</div>";


                layer.bindPopup(popup);
                layer.on('mouseover', () => { layer.openPopup() });
                layer.on('mouseout', () => { layer.closePopup() });
                layer.on('click', () => {
                    if(feature.properties.name === "Event") {
                        clickEventDetail(feature.properties.id);
                    }
                    else if(feature.properties.name === "Picture") {
                        clickPictureDetail(feature.properties.id);
                    }
                });
            }
        });
        MapUtils.setBoundsAndZoom(this.map, geoJSON);
        geoJSON.addTo(this.map);
    }
}

export default Map

[jgravois]

thanks for that. i’m juggling a couple other things at the moment, but i’ll be able to dig in deeper in a couple days.

[jgravois]

no worries at all. thanks for taking the time to close the loop @forgo.