title: React-leaflet custom component - context not being passed?
body: <p>I'm writing a custom component for react-leaflet.  It is an editable popup, with a few other features.  <a href="https://codesandbox.io/s/github/slutske22/React-Leaflet-Editable-Popup" rel="noreferrer">Here is a codesandbox</a> for an example..  The source code for the component is <a href="https://github.com/slutske22/React-Leaflet-Editable-Popup/blob/master/src/EditablePopup.js" rel="noreferrer">here</a>.  This example just does an <code>import EditablePopup from 'my-react-leaflet-popup-plugin'</code>, which is a .js file in my project.  Works well.</p>
  
  <p>I am trying to bundle this using webpack to package it as a node module so that others can use it.  It compiles without issue.  You can see my webpack.config.js <a href="https://github.com/slutske22/react-leaflet-edtiable-popup-npm-webpack/blob/master/webpack.config.js" rel="noreferrer">here</a>.  I am then using an <code>npm link</code> to link this module into a test project on my local machine.  When I do so, I get the error message:</p>
  
  <pre class="lang-js prettyprint-override"><code>TypeError: Cannot read property 'leafletElement' of null
  
    460 |   value: function value() {
    461 |     var e = this;
    462 |     this.props.open &amp;&amp; setTimeout(function () {
  &gt; 463 |       e.thePopup.leafletElement._source.openPopup();
        | ^  464 |     }, .001);
    465 |   }
    466 | }, {
  </code></pre>
  
  <p>Even if I get rid of that clause, I get this:</p>
  
  <pre class="lang-js prettyprint-override"><code>TypeError: Cannot read property 'openPopup' of undefined
  
  
    9226 | // @method openOn(map: Map): this
    9227 | // Adds the popup to the map and closes the previous one. The same as `map.openPopup(popup)`.
    9228 | openOn: function openOn(map) {
  &gt; 9229 |   map.openPopup(this);
         | ^  9230 |   return this;
    9231 | },
    9232 | onAdd: function onAdd(map) {
  </code></pre>
  
  <p>Its like the popup is trying to add itself to the map, but is not finding the map instance of the parent Map component. My hunch is that for some reason, when building this with webpack and importing it as an npm module, the context of the react-leaflet map is not getting passed properly to my component.  Which I don't really understand, as my component is just a dressed up version of react-leaflet's <code>&lt;Popup&gt;</code> component.  My <code>&lt;EditablePopup&gt;</code> uses <code>&lt;Popup&gt;</code> as a direct child, which inherently should be receiving the LeafletConsumer context consumer wrapper.</p>
  
  <p>I'm not sure why this component works great when linked within my project, but has this error when built through webpack and imported via npm.</p>