Super expression must either be null or a function (Custom Marker)

Question

I'm creating an application where the user can add markers to specific locations on the map just by clicking on the map itself. To this end, I'm using react-leaflet to generate the map and its functionalities. This works perfectly, but I want the popup associated with the marker to be open on creation, and I can't seem to achieve that.

I tried to follow this answer to get this functionality, and import the extended marker to my map. But alas, the following error appears:

Super expression must either be null or a function
at _inherits (Marker.js:21)
at eval (Marker.js:30)
at eval (Marker.js?6e37:11)
at Module../src/utils/components/Marker.js (main.js:11547)

This bothers me a lot, mainly because I can't seem to find a specific answer regarding this error when extending the marker class. Here's my extended marker implementation (couldn't be simpler):

import { Marker } from 'react-leaflet';

class ExtendedMarker extends Marker {

  componentDidMount() {
    // Call the Marker class componentDidMount (to make sure everything behaves as normal)
    super.componentDidMount();

    // Access the marker element and open the popup.
    this.leafletElement.openPopup();
  }

}

export default ExtendedMarker;  

And this is where I import it:

import ExtendedMarker from '../../../utils/components/Marker';

...

createMarker = (key, lat, lng) => {
  const _lat = round(lat, this.DECIMAL_PLACES);
  const _lng = round(lng, this.DECIMAL_PLACES);
  return (
    <ExtendedMarker key={key} id={key} position={[_lat, _lng]}>
      <Popup className={`${styles.popup}`}>
        <Form>
          ...
        </Form>
      </Popup>
    </ExtendedMarker>
  )
}

Here are the versions I'm using:

"react-leaflet": "^2.1.2",
"react": "^16.6.1"

Any tips?

Thanks, Gil

Answer 1

Since React official documentation suggests to prefer composition over inheritance:

At Facebook, we use React in thousands of components, and we haven’t found any use cases where we would recommend creating component inheritance hierarchies.

Props and composition give you all the flexibility you need to customize a component’s look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions.

i would suggest the following marker component which demonstrates how to open a popup on marker creation:

const ExtendedMarker = props => {

  const openPopup = marker => {
    if (marker) marker.leafletElement.openPopup();
  };

  return (
    <Marker ref={el => openPopup(el)} {...props}/>
  );
};

A callback function is used to access Leaflet Marker via marker.leafletElement

Here is a demo for your reference