TypeError Super Expression

Question

I'm developing a leaflet map with reactjs but I got this error when I implemented a <MarkerClusterGroup>from react-leaflet-markercluster.

TypeError: Super expression must either be null or a function, not object

Here is the error below:

Here's the Javascript:

import React, { Component } from 'react';
import L from 'leaflet';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';
import 'react-leaflet-markercluster/dist/styles.min.css';


// code for map marker icon
var myIcon = L.icon({
    iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=',
    iconSize: [25, 41],
    iconAnchor: [12.5, 41],
    popupAnchor: [0, -41]
});

export default class BikeMap extends Component {
    constructor(props) {
    super(props);
        this.state = {
            location: {
              lat: 51.505,
              lng: -0.09,
        },
        bikeData: [],
        isLoading: true,
        haveUsersLocation: false,
        zoom: 3
    }
}

//code for loading
componentWillMount() {
    setTimeout(() => this.setState({
        isLoading: false
    }), 2000);
}

componentDidMount() {
    //code to get the bike information
    fetch('https://api.citybik.es/v2/networks')
        .then(res => {
            if (!res.ok) {
                throw new Error(res.status);
            }
            return res.json();
        })
        .then(response => {
            const networkData = response.networks;
            this.setState({
                bikeData: networkData
            });
        })
        .catch(error => {
            console.log(error);
        });

    //code to get the user's location(if so desires)
    navigator.geolocation.getCurrentPosition((position) => {
        this.setState({
            location: {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            },
            haveUsersLocation: true,
            zoom: 6
        });
    }, () => {
        console.log('Uops! The user didnt give its location!');
        fetch('https://ipapi.co/json')
            .then(res => {
                if (!res.ok) {
                    throw new Error(res.status);
                }
                return res.json();
            })
            .then(location => {
                this.setState({
                    location: {
                        lat: location.latitude,
                        lng: location.longitude
                    },
                    haveUsersLocation: true,
                    zoom: 13
                });
            })
            .catch(error => {
                console.log(error);
            })
    });
}


render() {
    const { isLoading } = this.state;
    const position = [this.state.location.lat, this.state.location.lng]
    const bikeData = this.state.bikeData;

    if (isLoading) {
        return <div className="spinner"></div>
    }

    return (
        <Map className="map markercluster-map" center={position} zoom={this.state.zoom}>
            <TileLayer
                attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <MarkerClusterGroup>
                {
                    bikeData && bikeData.map((data, index) => {
                        const company = data.company;
                        if (company) {
                            const companyList = company.map((station, index) => {
                                return (
                                    <div key={index}>{station}</div>
                                )
                            })
                            return (
                                <Marker
                                    icon={myIcon}
                                    key={data.id}
                                    position={[data.location.latitude, data.location.longitude]}>
                                    <Popup>
                                        <b>City:</b> {data.location.city} <br />
                                        <b>Country:</b> {data.location.country} <br />
                                        <b>Name of Network:</b> {data.name} <br />
                                        <b>Number of Stations:</b> {data.company.length} <br />
                                        <b>Name of Stations:</b> {companyList}
                                    </Popup>
                                </Marker>
                            )
                        }
                        return <div key={index}>No Data</div>
                    })
                }
            </MarkerClusterGroup>
        </Map>
    )
}
}

I am using:

"leaflet": "^1.3.4",
"leaflet.markercluster": "^1.4.1",
"prop-types": "^15.6.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-leaflet": "^2.0.1",
"react-leaflet-markercluster": "^1.1.8"

Thank you!

Answer 1

Please use react-leaflet-markercluster@2.0.0-rc1

https://codesandbox.io/embed/31j028qp25