无法读取未定义的属性'Component'-React Pack插件的Webpack构建 [英] 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. Its a component that I want people to be able to install as an npm package, import, and use. 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

当直接在项目中使用此组件时，它可以工作(当然，假设您安装了所有相同的依赖项).我正在尝试使用webpack构建它并发布到npm，以便任何人都可以从'react-leaflet-arrowheads'进行 import {Polyline}并以此方式使用该组件.我的webpack.config看起来像这样:

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. My webpack.config looks like this:

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看起来像这样:

And my package.json looks like this:

{
  "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链接，然后将其链接到另一个项目以对其进行测试.在另一个项目中，我从"react-leaflet-arrowheads" import {Polyline}.但是我收到错误消息， TypeError:无法读取未定义的属性'Component'.显然，我的webpack构建和处理React的方式出了问题.但是我不确定.在webpack.config中使React(和朋友)成为 external 是不正确的吗?还是在package.json中作为 peerDependency ?该程序包导入到的项目已经具有并且应该一直具有作为依赖项的反应.我仍在学习使用webpack构建成为依赖项但具有自己依赖项的插件的方法.感谢您的阅读.

And then of I course I have my .babelrc which has my babel presets and plugins to properly compile the jsx and what not. It compiles without issue. I did an npm link, and then linked this to another project to test it out. In that other project, I have import { Polyline } from 'react-leaflet-arrowheads'. But I get the error message, TypeError: Cannot read property 'Component' of undefined. Clearly I am doing something wrong with my webpack build and the way I am handling React. But I am not sure what. Is it incorrect to make React (and friends) an external in the webpack.config? Or as a peerDependency in the package.json? 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. Thanks for reading.

推荐答案

我在扔飞镖，看是否有土地....

I'm throwing darts and seeing if any land....

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

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. 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.

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

我还注意到bapack-transform-react-jsx插件未包含在webpack中，但我不知道这是否可能是一个问题.

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.

这篇关于无法读取未定义的属性'Component'-React Pack插件的Webpack构建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！