Пользовательский пакет NPM: ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но

Question

Я пытаюсь опубликовать свой компонент React в npm и сталкиваюсь со следующей ошибкой при попытке импортировать мой упакованный компонент в другой проект:

Ошибка: тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы могли перепутать импорт по умолчанию и именованный импорт.

Сообщение об ошибке бесполезно, поскольку оно не имеет ничего общего с импортом по умолчанию и именованным импортом...

Я искал в SO похожие вопросы / ответы, и, хотя люди сталкивались с подобной ошибкой, ситуация / обстоятельства были разными. Кроме того, предложенные ответы в сообщениях, которые я читал, не сработали. Ниже приведена информация о моем компоненте React, который я пытался опубликовать в npm. Вот мой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",
    },
  },
};

Вот моя точка входа, 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;

После того, как я бегу npm run build успешно, а затем попробуйте протестировать его локально, используя либо npm pack или npm link (Я пробовал оба), когда я пытаюсь импортировать свои Feedback компонент в другой проект, я получаю следующую ошибку:

Ошибка: тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы могли перепутать импорт по умолчанию и именованный импорт.

Для справки, я импортирую свой компонент следующим образом:

import Feedback from "feeder-react-feedback";

И пытаюсь вот так вот встроить в свой проект:<Feedback projectId="12123123" /> // this is when the error gets thrown

Если это будет полезно, вот мой 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"
  }
}