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