React-leaflet custom component - context not being passed?

问题

I'm writing a custom component for react-leaflet. It is an editable popup, with a few other features. Here is a codesandbox for an example.. The source code for the component is here. This example just does an import EditablePopup from 'my-react-leaflet-popup-plugin', which is a .js file in my project. Works well.

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 here. I am then using an npm link to link this module into a test project on my local machine. When I do so, I get the error message:

TypeError: Cannot read property 'leafletElement' of null

  460 |   value: function value() {
  461 |     var e = this;
  462 |     this.props.open && setTimeout(function () {
> 463 |       e.thePopup.leafletElement._source.openPopup();
      | ^  464 |     }, .001);
  465 |   }
  466 | }, {

Even if I get rid of that clause, I get this:

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) {
> 9229 |   map.openPopup(this);
       | ^  9230 |   return this;
  9231 | },
  9232 | onAdd: function onAdd(map) {

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 <Popup> component. My <EditablePopup> uses <Popup> as a direct child, which inherently should be receiving the LeafletConsumer context consumer wrapper.

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.

来源：https://stackoverflow.com/questions/59641585/react-leaflet-custom-component-context-not-being-passed

标签

reactjs

Webpack

custom-component

react-leaflet