esri-leaflet-geocoder has error in both old and current version

Question

I was trying to have points plotted on a map based on the address for a project but for right now while testing I am just putting the map's view on the location. I found some information online giving a function to do this and it seemed to work with an older version of the library but on top of that it gave me the error "Should not import the named export 'version' (reexported as 'VERSION') from default-exporting module (only default export is available soon)".

I decided to update the library to the latest version and now I am getting this error "TypeError: Cannot read properties of undefined (reading '0')" which after some debugging showed me that it was returning null. I have no idea if there is a way to get rid of either error anything helps. It seemed that what I was trying to do was working with the older version but the error was showing up on top of it anyway here is my code.

import {MapContainer, Marker, Popup, TileLayer, useMap} from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-geosearch/dist/geosearch.css";
import * as ELG from 'esri-leaflet-geocoder';

const MapWrapper = () => {

 function Geocoder({ address }) {
        const map = useMap();

        ELG.geocode()
            .text(address)
            .run((err, results, response) => {
                console.log(results.results[0].latlng);
                const { lat, lng } = results.results[0].latlng;
                map.setView([lat, lng], 12);
            });

        return null;
    }

  return (
            <div id="mapid">
                <MapContainer
                    center={[40.730610,-73.935242]}
                    zoom={13}
                    scrollWheelZoom
                    style={{ height: "500px", borderRadius: '10px' }}
                >
                    <TileLayer
                        attribution='Google Maps'
                        url="https://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
                    />
                    //Problem here 2.3.4 and 3.1.4
                    <Geocoder address={'nyc'}/>
                </MapContainer>
            </div>

        );
    }

export default MapWrapper;

I was trying to figure out why there is nothing in the array from the docs but there doesn't seem to be anything explaining why .geocode doesn't work. It is still shown in the docs but doesn't get recognized when I try to use it in the newer version. I'm fine with using the older version as it does what I need to but I need to know how to get rid of that pesky "Should not import the named export 'version' (reexported as 'VERSION') from default-exporting module (only default export is available soon)".

Answer 1

You can implement a geosearch without the Esri Leaflet Geocoder and ArcGIS, as you can test in the simple jsFiddle demo:

The Javascript code below does not require any API key or payments:

'use strict';

var myMap = L.map('mapId').setView([40.730610,-73.935242], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
}).addTo(myMap);

var search = new GeoSearch.GeoSearchControl({
  provider: new GeoSearch.OpenStreetMapProvider(),
  style: 'bar',
  showPopup: true,
  popupFormat: ({
      query,
      result
    }) =>
    result.label +
    ': longitude: ' + parseFloat(result.x).toFixed(6) +
    ', latitude: ' + parseFloat(result.y).toFixed(6)
});

myMap.addControl(search);

html, body { 
  margin: 0;
  padding: 0;
}

#mapId {
  position: absolute;
  width: 100%;
  height: 100%;
}

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css">
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-geosearch@3/dist/geosearch.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet-src.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-geosearch@3/dist/bundle.min.js"></script>

<div id="mapId"></div>