React-leaflet自定义组件-上下文未传递？ [英] React-leaflet custom component - context not being passed?
问题描述
我正在为react-leaflet编写一个自定义组件。这是一个可编辑的弹出窗口，具有其他一些功能。 此处是一个codeandbox 。 此处。此示例仅从我的项目中的.js文件从 my-react-leaflet-popup-plugin 导入EditablePopup。效果很好。
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.
我正在尝试使用webpack将其捆绑为一个节点模块，以便其他人可以使用它。它编译没有问题。您可以看到我的webpack.config.js 此处。然后，我使用 npm链接将此模块链接到本地计算机上的测试项目中。这样做时，我收到错误消息：
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) {
就像弹出窗口试图将自身添加到地图中一样，但找不到父Map组件的地图实例。我的直觉是，由于某种原因，当使用webpack进行构建并将其作为npm模块导入时，react-leaflet映射的上下文未正确传递给我的组件。我不太了解，因为我的组件只是react-leaflet的< Popup> 组件的修饰版本。我的< EditablePopup> 使用< Popup> 作为直接子代，该子代本来应该接收LeafletConsumer上下文使用者包装器。
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.
我不确定为什么在我的项目中链接此组件时效果很好，但是通过webpack构建并通过npm导入时会出现此错误。
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.
推荐答案
我发布的答案受>无法阅读未定义的组件属性-React组件插件的Webpack构建。我的问题似乎至少与问题反应有关自定义NPM组件库
无法使用Context API，并且这些人仍在寻找答案-也许这会有所帮助。
I'm posting an answer that was inspired by this anwer in Cannot read property 'Component' of undefined - webpack build of react component plugin. My question here seems at least somewhat related to the question React Context API not working from custom NPM component library , and those folks are still looking for an answer - maybe this will help.
我必须在 webpack.config.js 和中进行调整package.json 来解决此问题。
I had to make adjustments in my webpack.config.js as well as the package.json to solve this issue.
更改此设置：
libraryTarget: 'commonjs2'
为此：
library: "EditablePopup",
libraryTarget: 'umd'
以及将 mode：development 添加到 module.exports 。
将我的某些依赖项移至 peerDependencies ：
// Change from this:
"dependencies": {
"html-react-parser": "^0.10.0",
"leaflet": "^1.6.0",
"react": "^16.12.0",
"react-contenteditable": "^3.3.3",
"react-dom": "^16.12.0",
"react-leaflet": "^2.6.1",
"webpack": "^4.41.5"
},
"peerDependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-leaflet": "^2.6.1",
"leaflet": "^1.6.0"
}
// to this:
"dependencies": {
"html-react-parser": "^0.10.0",
"react-contenteditable": "^3.3.3",
"webpack": "^4.41.5"
},
"peerDependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-leaflet": "^2.6.1",
"leaflet": "^1.6.0"
}
我很确定它的 webpack.config.js 更改是起因。为了完整起见，这里是对该文件的更改：
I'm pretty sure its the webpack.config.js changes that were the kicker. For completeness, here are the changes to that file:
// webpack.config.js
var path = require('path');
module.exports = {
entry: './src/EditablePopup.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'EditablePopup.js',
- libraryTarget: 'commonjs2',
+ library: "EditablePopup",
+ libraryTarget: 'umd'
},
+ mode: "development",
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components|build)/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
]
},
{
test : /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
}
]
},
externals: {
'react-dom': 'commonjs react-dom',
leaflet: {
commonjs: 'leaflet',
commonjs2: 'leaflet',
root: 'L'
},
'react-leaflet': {
commonjs: 'react-leaflet',
commonjs2: 'react-leaflet',
root: 'ReactLeaflet'
},
react: {
commonjs: 'react',
commonjs2: 'react',
root: 'React'
}
}
};
这篇关于React-leaflet自定义组件-上下文未传递？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
