reactjs - Using react-leaflet-geosearch in React Leaflet: cannot read property addControl

Question

Trying to add react-leaflet-geosearch to my leaflet map and I get the error:

Cannot read property 'addControl' of undefined

I do not know what the problem seems to be:

My code:

render() {
    const prov = OpenStreetMapProvider();
    const GeoSearchControlElement = SearchControl;
    return (
      <>
       
         
          <MapContainer
            style={{ height: "100%", width: "100%" }}
            center={position}
            zoom="0"
            scrollWheelZoom={true}
          >
            <TileLayer
              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url="https://api.mapbox.com/styles/v1/<style>/tiles/256/{z}/{x}/{y}@2x?access_token=<token>"
            />
            <Marker position={position} ></Marker>
            <ChangeMapView coords={position} />
            <GeoSearchControlElement
              provider={prov}
              showMarker={true}
              showPopup={false}
              popupFormat={({ query, result }) => result.label}
              maxMarkers={3}
              retainZoomLevel={false}
              animateZoom={true}
              autoClose={false}
              searchLabel={"Enter address, please"}
              keepResult={true}
            />
          </MapContainer>
        
      </>
    );

question from:https://stackoverflow.com/questions/65909171/using-react-leaflet-geosearch-in-react-leaflet-cannot-read-property-addcontrol

Answer 1

You seem to use React Leaflet version 3 since you have a <MapContainer> component.

Unfortunately, the react-leaflet-geosearch plugin you are trying to integrate was made for React Leaflet version 2: https://github.com/TA-Geoforce/react-leaflet-geosearch/blob/master/package.json#L108

Due to the big API changes between these major versions, it is unlikely it will be compatible.