title: map.addLayer(markerClusters) is not a function
body: <p>I get this error:</p>
  
  <blockquote>
    <p>map.addLayer(markerClusters) is not a function</p>
  </blockquote>
  
  <p>in for my markerClusters since I updated the following packages:</p>
  
  <pre><code>"leaflet": "^0.7.7",
  "leaflet.markercluster": "^0.5.0",
  "react-leaflet": "^0.12.3",
  "react-leaflet-cluster-layer": "0.0.3",
  "react-leaflet-control": "^1.1.0",
  </code></pre>
  
  <p>to</p>
  
  <pre><code>"leaflet": "^0.7.7",
  "leaflet.markercluster": "^1.0.3",
  "react-leaflet": "^1.1.6",
  "react-leaflet-control": "^1.4.0",
  "react-leaflet-cluster-layer": "0.0.3",
  </code></pre>
  
  <p>I need this update for another map on my page, so I dont want to use the old versions. Does anyone have an idea how to solve this. </p>
  
  <p>I just found that on SO that map is not a global variable, but as its defined, it is available. Googling also hasn't brought anything up, which is of use.</p>
  
  <p>Thanks in Advance!</p>
  
  <p>Here is my MarkerClusters.js file:</p>
  
  <pre><code>import { Component, PropTypes } from 'react';
  import Leaflet from 'leaflet';
  import 'leaflet.markercluster';
  import styles from './MarkerCluster.scss';
  import markerDefaultIcon from '../../../assets/images/marker_default.png';
  
  export default class MarkerCluster extends Component {
  
      static propTypes = {
          map: PropTypes.object.isRequired,
          features: PropTypes.array
      }
  
      componentDidMount() {
          this.createMarkerClusters(this.props);      
      }
  
      componentWillReceiveProps(nextProps) {
          if (nextProps.features !== this.props.features) {
              this.createMarkerClusters(nextProps);
          }
      }
  
      createMarkerClusters = (props = this.props) =&gt; {
          const { map, features } = props; 
          if (!features || !features.length) {
              return null;
          }
          const markerClusters = Leaflet.markerClusterGroup({
              disableClusteringAtZoom: 14,
              maxClusterRadius: 110,
              polygonOptions: {
                  color: '#fff'
              },
              iconCreateFunction(cluster) {
                  const count = cluster.getChildCount();
                  let clusterSizeClassName = styles.small_cluster;
                  if (count &gt; 80) {
                      clusterSizeClassName = styles.large_cluster;
                  } else if (count &gt; 15) {
                      clusterSizeClassName = styles.mid_cluster;
                  }
                  return Leaflet.divIcon({ 
                      iconSize: [45, 45],
                      className: `${styles.marker_cluster} ${clusterSizeClassName}`,
                      html: `&lt;b class="${styles.cluster_inner}"&gt; ${count} &lt;/b&gt;`
                  });
              }
          });   
          const icon = Leaflet.divIcon({
              className: '',
              iconSize : [48, 64],
              iconAnchor: [9, 63],
              html: `&lt;img class="${styles.marker}" src='${markerDefaultIcon}'/&gt;`
          });
          features.forEach(feature =&gt; {
              const { geometry, properties } = feature;
              const title = properties.name;
              const { coordinates: [lng, lat] } = geometry;
              const marker = Leaflet.marker(new Leaflet.LatLng(lat, lng), { title, icon });
              marker.bindPopup(this.getPopupTemplate(properties));
              markerClusters.addLayer(marker);
          });
          map.addLayer(markerClusters);
          window.setTimeout(() =&gt; {            
              if (this.markerClusters) {
                  map.removeLayer(this.markerClusters); 
              }
              this.markerClusters = markerClusters; 
          }, 300);
      }
  
      getPopupTemplate = props =&gt; {
          const createImageHolder = image =&gt; {
              if (!image) {
                  return '';
              }
              return (
                  `&lt;div class="${styles.image}"&gt;
                      &lt;img src="${props.image.medium}" /&gt;
                  &lt;/div&gt;`
              );
          }
          return (
              `&lt;div class="${styles.popup}"&gt;
                  &lt;a 
                      class="${styles.link}"
                      href="/d/${props.id}"
                  &gt;
                      &lt;div class="${styles.title}"&gt;${props.name}&lt;/div&gt;
                      ${createImageHolder(props.image)}
                      Buy
                  &lt;/a&gt;
              &lt;/div&gt;`
          )
      }
  
      render() {
          return null;
      }
  
  }
  </code></pre>
  
  <p><strong>Stack trace:</strong> </p>
  
  <blockquote>
    <p>Uncaught (in promise) TypeError: map.addLayer is not a function
        at MarkerCluster._this.createMarkerClusters (MarkerCluster.js:64)
        at MarkerCluster.componentWillReceiveProps (MarkerCluster.js:20)
        at ReactCompositeComponent.js:611
        at measureLifeCyclePerf (ReactCompositeComponent.js:75)
        at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:610)
        at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:547)
        at Object.receiveComponent (ReactReconciler.js:125)
        at Object.updateChildren (ReactChildReconciler.js:109)
        at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:208)
        at ReactDOMComponent._updateChildren (ReactMultiChild.js:312)</p>
  </blockquote>