[英]Cannot read property 'Component' of undefined - webpack build of react component plugin
I'm building a react-leaflet wrapper for my leaflet plugin leaflet-arrowheads .我正在为我的传单插件Leaflet-arrowheads构建一个react-leaflet包装器。 Its a component that I want people to be able to install as an npm package, import, and use.
它是我希望人们能够作为 npm 包安装、导入和使用的组件。 The component is simple:
该组件很简单:
import React from 'react'
import { Polyline } from 'react-leaflet'
import 'leaflet-arrowheads'
class ArrowheadsPolyline extends React.Component{
componentDidMount(){
const polyline = this.polylineRef.leafletElement
if (this.props.arrowheads){
polyline.arrowheads(this.props.arrowheads)
polyline._update()
}
}
render(){
return(
<Polyline {...this.props} ref={polylineRef => this.polylineRef = polylineRef} />
)
}
}
export default ArrowheadsPolyline
It works when using this component directly within a project (assuming you have all the same dependencies in installed of course).它在项目中直接使用此组件时有效(当然,假设您安装了所有相同的依赖项)。 I am trying to build this with webpack and publish to npm so that anyone can do a
import { Polyline } from 'react-leaflet-arrowheads'
and use the component that way.我正在尝试使用 webpack 构建它并发布到 npm,以便任何人都可以
import { Polyline } from 'react-leaflet-arrowheads'
执行import { Polyline } from 'react-leaflet-arrowheads'
并以这种方式使用该组件。 My webpack.config looks like this:我的 webpack.config 看起来像这样:
var path = require('path')
module.exports = {
entry: "./src/react-leaflet-arrowheads.js",
output: {
path: path.resolve(__dirname, "build"),
filename: "react-leaflet-arrowheads.js",
library: "ReactLeafletArrowheads"
},
mode: "development",
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
]
}
]
},
externals: {
'react': {
commonjs: 'react',
commonjs2: 'react',
root: 'React'
},
'react-dom': 'commonjs react-dom',
'leaflet': {
commonks: 'leaflet',
commonjs2: 'leaflet',
root: 'L'
},
'react-leaflet': {
commonjs: 'react-leaflet',
commonjs2: 'react-leaflet',
Root: 'ReactLeaflet'
}
}
}
And my package.json looks like this:我的 package.json 看起来像这样:
{
"name": "react-leaflet-arrowheads",
"version": "1.0.0",
"description": "A react-leaflet wrapper for leaflet-arrowheads",
"main": "build/react-leaflet-arrowheads.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --watch",
"build": "webpack"
},
"keywords": [
"leaflet",
"react",
"react-leaflet",
"arrowheads"
],
"author": "Seth Lutske",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/preset-env": "^7.8.4",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.7.0",
"webpack-cli": "^3.3.10"
},
"dependencies": {
"leaflet-arrowheads": "^1.0.11",
"webpack": "^4.41.5"
},
"peerDependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-leaflet": "^2.6.1",
"leaflet": "^1.6.0"
}
}
And then of I course I have my .babelrc which has my babel presets and plugins to properly compile the jsx and what not.然后我当然有我的 .babelrc ,它有我的 babel 预设和插件来正确编译 jsx 什么不是。 It compiles without issue.
它编译没有问题。 I did an
npm link
, and then linked this to another project to test it out.我做了一个
npm link
,然后将其链接到另一个项目以进行测试。 In that other project, I have import { Polyline } from 'react-leaflet-arrowheads'
.在另一个项目中,我
import { Polyline } from 'react-leaflet-arrowheads'
。 But I get the error message, TypeError: Cannot read property 'Component' of undefined
.但是我收到错误消息
TypeError: Cannot read property 'Component' of undefined
。 Clearly I am doing something wrong with my webpack build and the way I am handling React.显然,我的 webpack 构建和处理 React 的方式有问题。 But I am not sure what.
但我不确定是什么。 Is it incorrect to make React (and friends) an
external
in the webpack.config?在 webpack.config 中将 React(和朋友)设为
external
是否不正确? Or as a peerDependency
in the package.json?或者作为 package.json 中的
peerDependency
? The project that this package gets imported into already has and should always already have react as a dependency.该包导入的项目已经具有并且应该始终具有作为依赖项的反应。 Using webpack to build plugins that become dependencies, but that have their own dependencies, is still something I am learning the subtleties of.
使用 webpack 构建成为依赖项但有自己依赖项的插件,这仍然是我正在学习的精妙之处。 Thanks for reading.
谢谢阅读。
I'm throwing darts and seeing if any land....我正在扔飞镖,看看是否有土地......
The webpack docs indicate that, to create a library that is available as an ES5 import and a commonJs requires, you need to add libraryTarget: 'umd'
to the output
object. webpack 文档指出,要创建可用作 ES5 导入和 commonJs 所需的库,您需要将
libraryTarget: 'umd'
添加到output
对象。 I honestly can't say that it doesn't permit import
without it, but it does say that, without the libraryTarget defined, it defaults to 'var'
, which apparently creates a var
with the default export results assigned to it.老实说,我不能说没有它就不允许
import
,但它确实说,如果没有定义 libraryTarget,它默认为'var'
,这显然创建了一个带有分配给它的默认导出结果的var
。
https://webpack.js.org/guides/author-libraries/#expose-the-library https://webpack.js.org/guides/author-libraries/#expose-the-library
I'm also noticing that the babel-transform-react-jsx plugin isn't included in webpack, but I have no idea if that might be an issue down the line.我还注意到 babel-transform-react-jsx 插件不包含在 webpack 中,但我不知道这是否可能是一个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.