Cannot read property 'Component' of undefined - webpack build of react component plugin

Question

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

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'
        }
    }
}

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

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.

Answer 1

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

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.