2

我正在尝试将我的 React 组件发布到 npm 并在尝试将我的打包组件导入另一个项目时遇到以下错误：

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

该错误消息没有帮助，因为这与默认导入与命名导入无关...

我搜索了类似的问题/答案，虽然人们遇到了类似的错误，但情况/情况并不相同。此外，我阅读的帖子中建议的答案也不起作用。下面是关于我一直试图发布到 npm 的 React 组件的信息。这是我的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组件导入另一个项目时，我收到以下错误：

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

作为参考，我正在导入我的组件，如下所示：

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

0 回答 0