编译失败。组件定义缺少显示名称 react/display-name

Question

我正在尝试运行一个 javascript 应用程序，但它向我显示此错误。我没有找到任何有用的答案。当我评论 Button.js 时代码有效，但没有显示 anything.I 猜测这个问题与 material-ui 框架有关。如果有人能提供帮助，我将不胜感激我.

Failed to compile.

src/components/CustomButtons/Button.js
  Line 15:23:  Component definition is missing display name  react/display-name

Search for the keywords to learn more about each error.

按钮class：

 import React from "react";
    // nodejs library that concatenates classes
    import classNames from "classnames";
    // nodejs library to set properties for components
    import PropTypes from "prop-types";

// material-ui components
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

import styles from "assets/jss/material-dashboard-pro-react/components/buttonStyle.js";

const useStyles = makeStyles(styles);

const RegularButton = React.forwardRef((props, ref) => {
  const classes = useStyles();
  const {
    color,
    round,
    children,
    fullWidth,
    disabled,
    simple,
    size,
    block,
    link,
    justIcon,
    className,
    muiClasses,
    ...rest
  } = props;
  const btnClasses = classNames({
    [classes.button]: true,
    [classes[size]]: size,
    [classes[color]]: color,
    [classes.round]: round,
    [classes.fullWidth]: fullWidth,
    [classes.disabled]: disabled,
    [classes.simple]: simple,
    [classes.block]: block,
    [classes.link]: link,
    [classes.justIcon]: justIcon,
    [className]: className,
  });
  return (<Button {...rest} ref={ref} classes={muiClasses} className={btnClasses}>{children}</Button>);
});

RegularButton.propTypes = {
  color: PropTypes.oneOf([
    "primary",
    "info",
    "success",
    "warning",
    "danger",
    "rose",
    "white",
    "twitter",
    "facebook",
    "google",
    "linkedin",
    "pinterest",
    "youtube",
    "tumblr",
    "github",
    "behance",
    "dribbble",
    "reddit",
    "transparent",
  ]),
  size: PropTypes.oneOf(["sm", "lg"]),
  simple: PropTypes.bool,
  round: PropTypes.bool,
  fullWidth: PropTypes.bool,
  disabled: PropTypes.bool,
  block: PropTypes.bool,
  link: PropTypes.bool,
  justIcon: PropTypes.bool,
  className: PropTypes.string,
  muiClasses: PropTypes.object,
  children: PropTypes.node,
};

export default RegularButton;

Answer 1

您应该在导出组件之前定义 displayName。

RegularButton.displayName = "Regularbutton";

Answer 2

我发现了一个解决方案，首先我将我的 npm 从 6.x 更新到 8.5.0。为此，我删除了计算机的 nodejs 和 npm：

 sudo apt-get remove nodejs
 sudo apt-get remove npm
 sudo apt-get autoremove
 which nodejs

如果在上一条命令中显示某个目录，则复制并删除带有sudo rm -rf（目录）的目录，如：sudo rm -rf /usr/local/bin/npm

用 npm 做同样的事情：

which npm

在此之后 sudo apt autoremove 并确定它已被删除 nodejs --version 和 npm --version。我希望终端不会为您显示任何版本。在节点站点下载更新版本，解压缩 .deb，然后 sudo apt-get nodejs，确保它已安装 nodejs --version 和 npm --version 现在在 npm install . --legacy-peer-deps 和 npm start 项目中，为我工作

编译失败。组件定义缺少显示名称 react/display-name

Failed to compile. Component definition is missing display name react/display-name

javascript

node.js

npm

reactjs