Component definition is missing display name in reactjs? - reactjs

Question

I am complete my project. Now I am trying to get a production build. But I am getting an error with name "Component definition is missing display name". I am using nextjs.
From my whole proect only two component, show that error like image-
Clikc to see the image. I use material-table-core with mui5 in both component.
I am fully confused why I am seeing this error?
One of that component is-
import React from "react";
import { forwardRef } from "react";
import { Box, Stack, SvgIcon, Typography, ButtonBase, InputBase, Rating } from "#mui/material";
import { Star, ArrowDownward } from '#mui/icons-material';
import MaterialTable, { Column } from "#material-table/core";
//Custom Icon
import { DeleteIcon, ArrowUp, ArrowDown } from "Utilis/Icons";
//Theme
import theme from "Theme";
//Styles
import useStyles from "Styles/Common/DataTable.styles";
//Data
import cartData from "Data/Cart.data";
const DataTable = () => {
const classes = useStyles();
const columns = [
{ title: 'Product', field: 'product', cellStyle: { width: "75%" } },
{ title: 'Price', field: 'price', cellStyle: { width: "5%" } },
{ title: 'Quantity', field: 'quantity', cellStyle: { width: "10%" } },
{ title: 'Subtotal', field: 'subtotal', cellStyle: { width: "5%" } },
{ title: 'Remove', field: 'action', cellStyle: { width: "5%" } }
];
const data = [];
cartData && cartData.forEach(cart => {
data.push({
product: <Stack direction="row" sx={{ alignItems: "center" }}>
<Box>
<Box component="img" className={classes.ProductImages} src={cart.product.images[0].url} alt="Product Image" />
</Box>
<Box>
<Typography className={classes.ProductTitle} variant="h6" component="h6">
{cart.product.name}
</Typography>
<Rating
name="half-rating-read"
defaultValue={5}
precision={4}
readOnly
className={classes.Star}
emptyIcon={<Star fontSize="inherit" />}
/>
</Box>
</Stack>,
price: <Typography className={classes.ProductPrice} variant="h6" component="h6">
${cart.product.price}
</Typography>,
quantity:
<Box sx={{ position: "relative" }} className="sdfjshfggb">
<InputBase
className={classes.InputField}
value={cart.count}
type="text"
/>
<Box className={classes.CounterButton}>
<ButtonBase>
<SvgIcon viewBox="0 0 23 13">
{ArrowUp}
</SvgIcon>
</ButtonBase>
<ButtonBase>
<SvgIcon viewBox="0 0 23 13">
{ArrowDown}
</SvgIcon>
</ButtonBase>
</Box>
</Box>,
subtotal:
<Typography variant="h6" component="h6" className={classes.ProductPriceTotal}>
${cart.product.price * cart.count}
</Typography>,
action:
<ButtonBase className={classes.RemoveButton} >
<SvgIcon viewBox="0 0 24 24">{DeleteIcon}</SvgIcon>
</ButtonBase >
})
})
return (
<Box className={classes.DataTable}>
<MaterialTable
columns={columns}
data={data}
options={{
search: false,
showTitle: false,
toolbar: false,
selection: true,
paging: false,
headerStyle: {
backgroundColor: theme.palette.primary.input_bg,
color: theme.palette.primary.main,
}
}}
localization={{
body: {
emptyDataSourceMessage: (
<Typography variant="body1" component="p">
Cart is Empty!
</Typography>
),
},
}}
icons={{ SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />) }}
onSelectionChange={(e) => console.log(e)}
/>
</Box>
);
};
export default DataTable;
I am new in react/nextjs. This is my first project. Anyone can help me?

Answer 1

You are using an arrow funciton. You can either switch to a regular function, which will solve the problem of the displayName or you can set the displayName of the arrow function right before exporting it. Exporting an arrow function directly doesn't give the component a displayName.
DataTable.displayName = "DataTable"
export default DataTable;