Не удается прочитать свойство 'Component' из неопределенного - сборка веб-пакета плагина реагирующих компонентов

Question

Я создаю ответную листовку обертку для моего плагина листовки листовки-стрелки . Это компонент, который я хочу, чтобы люди могли устанавливать как 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 и publi sh до 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'
        }
    }
}

И мой пакет. 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"
  }
}

И, конечно, у меня есть мой .babelr c который имеет мои предустановки и плагины babel для правильной компиляции jsx, а что нет. Компилируется без проблем. Я сделал npm link, а затем связал это с другим проектом, чтобы проверить его. В этом другом проекте у меня есть import { Polyline } from 'react-leaflet-arrowheads'. Но я получаю сообщение об ошибке TypeError: Cannot read property 'Component' of undefined. Очевидно, что я делаю что-то не так с моей сборкой веб-пакетов и тем, как я работаю с React. Но я не уверен, что. Неправильно ли сделать React (и друзей) external в webpack.config? Или как peerDependency в упаковке. json? Проект, в который импортируется этот пакет, уже имеет и должен всегда реагировать как зависимость. Использование webpack для создания плагинов, которые становятся зависимостями, но которые имеют свои собственные зависимости, - все еще кое-что, что я изучаю тонкости. Спасибо за чтение.

Answer 1

Я кидаю дротики и смотрю, есть ли земля ...

Документы на веб-пакете указывают, что для создания библиотеки, доступной в качестве импорта ES5 и требующей общего Js, вам нужно добавить libraryTarget: 'umd' к объекту output. Я, честно говоря, не могу сказать, что он не разрешает import без него, но он говорит, что без определения libraryTarget по умолчанию он равен 'var', что, очевидно, создает var с результатами экспорта по умолчанию, назначенными для it.

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

Я также замечаю, что плагин babel-transform-реагировать-jsx не включен в веб-пакет, но Я понятия не имею, может ли это быть проблемой в будущем.