javascriptnode.jsreactjsnpm

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


I'm trying to run a javascript application, but it shows me this error. I didn't find any helpful answer. When I comment the Button.js the code works, but doesn't show anything.I guess this problem is associated with material-ui framework .I will be gratefull if somebody could help me.

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.

   

The class of button:

 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;

Solution

  • I discovered a solution, first i updated my npm from 6.x to 8.5.0. to do this i deleted my nodejs and npm of my computer:

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

    If show some directory in the last command, copy and delete the directory with sudo rm -rf (diretory), like: sudo rm -rf /usr/local/bin/npm

    Do the same thing with npm:

    which npm
    

    After this just sudo apt autoremove and to be sure it was deleted nodejs --version and npm --version. I hope that terminal doesn't show any version for you. At node site download a updated version, descompact the .deb and then sudo apt-get nodejs, make sure it was installed nodejs --version and npm --version Now at the project npm install . --legacy-peer-deps and npm start, worked for me