react-leaflet-search component not rendering

Question

When I am trying to render react-leaflet-search, I get an error. When I am trying to use the solution for that error, react is compiling but component does not seem to be rendering.

I tried their example simple search. Getting the same error

TypeError: Cannot read property 'map' of undefined
new ReactLeafletSearch
C:/Users/project/node_modules/react-leaflet-search/lib/React-Leaflet-Search.js:106
  103 |   });
  104 |   _this.SearchInfo = null; // searched lat,lng or response from provider
  105 | 
> 106 |   _this.map = context.map || props.leaflet.map;
      | ^  107 |   return _this;
  108 | }
  109 | 

I tried this solution (from the react-leaflet-search page)

const searchComponent = props => (<ReactLeafletSearch position="topleft" />);

i even tried this:

const searchComponent = withLeaflet(ReactLeafletSearch);

these lines bypass the "error" but no component seems to be rendering.

my react-leaflet Map component is loading, the zoom +/- buttons too, but not the search.

this is the code that i am using map example ofcourse i am also doing:

import { ReactLeafletSearch } from "react-leaflet-search";

the only difference is that after line 31 i add my component.

31. </Marker>
32. <searchComponent></searchComponent>
33. </Map>

and nothing seems to be rendering at all.

The result I would expect is a search component like the one showing in this working example

Answer 1

To reproduce this example you need to:

Install leaflet, react-leaflet, react-leaflet-search.

After, you need to install babel-polyfill and if you use react-leaflet v2 you should wrap this component with the withLeaflet method. It is also documented as a github issue.

const ReactLeafletSearchComponent = withLeaflet(ReactLeafletSearch);

In the render method of example's SimpleExample component:

export default class SimpleExample extends Component {
   ...

     render() {
        // here wrap it
        const ReactLeafletSearchComponent = withLeaflet(ReactLeafletSearch);

    return (
      <Map
        className="simpleMap"
        scrollWheelZoom={true}
        bounds={this.state.bounds}
        maxZoom={this.state.maxZoom}
        maxBounds={this.state.maxBounds}
      >
        <TileLayer
          noWrap={true}
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <ReactLeafletSearchComponent
          customProvider={this.provider}
          position="topleft"
          inputPlaceholder="Custom placeholder"
          search={[33.100745405144245, 46.48315429687501]}
          showMarker={true}
          zoom={5}
          showPopup={true}
          popUp={this.customPopup}
          closeResultsOnClick={true}
          openSearchOnLoad={true}
          // // these searchbounds would limit results to only Turkey.
          searchBounds={[
            [33.100745405144245, 46.48315429687501],
            [44.55916341529184, 24.510498046875]
          ]}
          // providerOptions={{region: 'tr'}}

          // default provider OpenStreetMap
          // provider="BingMap"
          // providerKey="AhkdlcKxeOnNCJ1wRIPmrOXLxtEHDvuWUZhiT4GYfWgfxLthOYXs5lUMqWjQmc27"
        />
      </Map>
    );
  }
}

Don't forget also to add the map height and to import leaflet.css

Demo

Answer 2

kboul's answer helped me fix my issue of search component not rendering properly.

    const ReactLeafletSearchComponent = withLeaflet(ReactLeafletSearch);

after that you can use "ReactLeafletSearchComponent" and the component will render.

The thing that i was using a different name for the variable. It seems that it is name-sensitive to a degree. (i dont understand completely how much) but when i try to use a name like "searchComp" it won't work, but when i try "ReactLeafletSearchComponent" it works just fine.