Custom NPM Package: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but

Question

I am trying to publish my React component to npm and running into the following error when trying to import my packaged component into another project:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

The error message is unhelpful as this has nothing to do with default vs. named imports...

I have searched SO for similar questions/answers and while people have ran into a similar error, the situation/circumstance was not the same. Also, the suggested answers in the posts I read did not work. Below is information on my React component that I have been trying to publish to npm. Here is my webpack.config.js:

var path = require("path");

module.exports = {
  mode: "production",
  entry: "./src/Feedback.js",
  output: {
    path: path.resolve("lib"),
    filename: "Feedback.js",
    libraryTarget: "commonjs2",
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
      {
        test: /\.(s*)css$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.svg$/,
        use: ["@svgr/webpack"],
      },
    ],
  },
  resolve: {
    alias: {
      react: path.resolve(__dirname, "./node_modules/react"),
      "react-dom": path.resolve(__dirname, "./node_modules/react-dom"),
    },
  },
  externals: {
    // Don't bundle react or react-dom
    react: {
      commonjs: "react",
      commonjs2: "react",
      amd: "React",
      root: "React",
    },
    "react-dom": {
      commonjs: "react-dom",
      commonjs2: "react-dom",
      amd: "ReactDOM",
      root: "ReactDOM",
    },
  },
};

Here is my entry point, Feedback.js

import React, { Component } from "react";
import PropTypes from "prop-types";

import "./Feedback.scss";
import Trigger from "./Trigger";

class Feedback extends Component {
  render() {
    let { props } = this;

    return (
      <div className="feedback-container">
        <Trigger
          email={props.email}
          emailRequired={props.emailRequired}
          emailDefaultValue={props.emailDefaultValue}
          projectName={props.projectName}
          projectId={props.projectId}
          primaryColor={props.primaryColor}
          textColor={props.textColor}
          hoverBorderColor={props.hoverBorderColor}
          postSubmitButtonMsg={props.postSubmitButtonMsg}
          submitButtonMsg={props.submitButtonMsg}
        />
      </div>
    );
  }
}

Feedback.propTypes = {
  email: PropTypes.bool,
  emailRequired: PropTypes.bool,
  emailDefaultValue: PropTypes.string,
  projectName: PropTypes.string,
  projectId: PropTypes.string.isRequired,
  primaryColor: PropTypes.string,
  textColor: PropTypes.string,
  hoverBorderColor: PropTypes.string,
  postSubmitButtonMsg: PropTypes.string,
  submitButtonMsg: PropTypes.string,
};

Feedback.defaultProps = {
  email: false,
  emailRequired: false,
  emailDefaultValue: "",
  projectName: "",
  primaryColor: "#000000",
  textColor: "#ffffff",
  hoverBorderColor: "#000000",
  postSubmitButtonMsg: "Thanks!",
  submitButtonMsg: "Send Feedback",
};

export default Feedback;

After I run npm run build successfully and then try to test it locally using either npm pack or npm link (I've tried both), when I try to import my Feedback component into another project I get the following error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

For reference, I am importing my component as follows:

import Feedback from "feeder-react-feedback";

And trying to embed it like this into my project: <Feedback projectId="12123123" /> // this is when the error gets thrown

In case it is helpful, here is my package.json:

{
  "name": "feeder-react-feedback",
  "version": "0.0.1",
  "description": "n/a",
  "main": "./lib/Feedback.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack"
  },
  "peerDependencies": {
    "@svgr/webpack": "^5.4.0",
    "axios": "^0.19.2",
    "node-sass": "^4.14.1",
    "prop-types": "^15.6.0",
    "radium": "^0.26.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-textarea-autosize": "^8.0.1",
    "react-transition-group": "^4.4.1",
    "sass-loader": "^8.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.10.3",
    "@babel/plugin-proposal-class-properties": "^7.10.1",
    "@babel/preset-env": "^7.7.6",
    "@babel/preset-react": "^7.7.4",
    "@svgr/webpack": "^5.4.0",
    "axios": "^0.19.2",
    "babel-core": "^7.0.0-bridge.0",
    "babel-loader": "^7.1.4",
    "css-loader": "^3.5.1",
    "node-sass": "^4.14.1",
    "path": "^0.12.7",
    "prop-types": "^15.6.0",
    "radium": "^0.26.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-textarea-autosize": "^8.0.1",
    "react-transition-group": "^4.4.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "webpack": "^4.5.0",
    "webpack-cli": "^3.3.12"
  }
}