Question

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

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

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

我在SO中搜索了类似的问题/答案，而当人们遇到类似的错误时，情况/情况却并不相同。另外，我阅读的帖子中建议的答案无效。以下是我一直试图发布到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之后，当我尝试导入{{1}时，尝试使用npm pack或npm link在本地进行测试（我都尝试过） }组件插入另一个项目，出现以下错误：

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

作为参考，我将如下导入我的组件：

Feedback

并尝试将其嵌入到我的项目中： import Feedback from "feeder-react-feedback";

如果有帮助，这是我的package.json：

<Feedback projectId="12123123" /> // this is when the error gets thrown

自定义NPM软件包：错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但是

0 个答案: