Component definition is missing display name in 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;