reactjs - 自定义 NPM 包：错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但是
问题描述
我正在尝试将我的 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"
}
}