'TypeError React-Leaflet: Cannot read property 'x' of null

When I click on marker, this error appears. Everything was fine before I added custom Icon. But now it does not show the popup at all.

Custom Icon:

const MapSection = () => {
  const customIcon = new L.Icon({
    iconUrl: '../marker.svg',
    iconRetinaUrl: '../marker.svg',
    iconAnchor: null,
    popupAnchor: null,
    shadowUrl: null,
    shadowSize: null,
    shadowAnchor: null,
    iconSize: new L.Point(50, 65),
    className: 'leaflet-div-icon',
  });

Marker Code:

<MarkerClusterGroup>
  {markerData.map((singleMarker) => (
    <Marker icon={customIcon} position={[singleMarker.lat, singleMarker.long]}>
      <Popup className={classes.popup}>
        {/* <Typography>موسسه دکتر شیری جلالی</Typography> */}
        <MapCard id={singleMarker.organization_id} />
      </Popup>
    </Marker>
  ))}
</MarkerClusterGroup>;

Error:

  52 | 
  53 | _add: function (point) {
  54 |  // destructive, used directly for performance in situations where it's safe to modify existing point
> 55 |  this.x += point.x;
     | ^  56 |  this.y += point.y;
  57 |  return this;
  58 | },

Solution 1:^[1]

Leaflet doesn't know where to anchor your marker's icon (or the icon shadow, popup, etct) relative to the latLng. That is determined by the values iconAnchor, popupAnchor, shadowUrl, shadowSize, shadowAnchor need to have values. Without values, leaflet is look for x and y of null, hence the error , or you could simply cut iconAnchor, popupAnchor from you map object:

let locationIcon = new L.Icon({
iconUrl: mapMarker,
iconRetinaUrl: mapMarker,
// iconAnchor: ['35.739212', '51.412767'],
// popupAnchor: null,
shadowUrl: null,
shadowSize: null,
shadowAnchor: null,
iconSize: new L.Point(35, 45),
className: 'location-icon',
  })
 return (
      <Marker
      position={[item.lat, item.lng]}
      icon={locationIcon}
      
      // interactive={false}
      key={item.merchantId}
      eventHandlers={{
        click: (e) => {
          console.log('marker clicked', e)
          handleShowDetails(item)
        }
      }}
    >

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	kiarash shamaii

'TypeError React-Leaflet: Cannot read property 'x' of null

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]