无法读取未定义的属性“”component“”- react组件插件的webpack版本

Question

我正在为我的leaflet插件leaflet-arrowheads构建一个react-leaflet包装器。这是一个我希望人们能够作为npm包安装、导入和使用的组件。组件很简单：

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

当直接在项目中使用此组件时，它可以工作(当然，假设您安装了所有相同的依赖项)。我正在尝试和webpack一起构建这个，并发布到npm，这样任何人都可以做一个import { Polyline } from 'react-leaflet-arrowheads'，并以这种方式使用组件。我的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'
        }
    }
}

我的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"
  }
}

当然，我还有我的.babelrc，它有我的babel预置和插件来正确编译jsx等等。它编译时没有问题。我做了一个npm link，然后将它链接到另一个项目来测试它。在另一个项目中，我使用了import { Polyline } from 'react-leaflet-arrowheads'。但是我得到了错误信息，TypeError: Cannot read property 'Component' of undefined。很明显，我的webpack版本和我处理React的方式做错了什么。但我不确定是什么。在webpack.config中创建React (和好友) external是不正确的吗？或者作为package.json中的peerDependency？将此包导入到的项目已经并且应该始终将react作为依赖项。使用webpack来构建插件，这些插件成为依赖项，但有自己的依赖项，我仍然在学习其中的微妙之处。感谢您的阅读。

Answer 1

我在投掷飞镖，看看有没有陆地...

webpack文档指出，要创建一个可作为ES5导入和commonJs所需的库，您需要将libraryTarget: 'umd'添加到output对象中。老实说，我不能说它不允许没有libraryTarget的import，但它确实说过，如果没有定义libraryTarget，它将默认为'var'，这显然会创建一个分配了默认导出结果的var。

https://webpack.js.org/guides/author-libraries/#expose-the-library

我还注意到，babel-transform-react-jsx插件没有包含在webpack中，但我不知道这是否会成为一个问题。