Keep getting can not read properties of undefined, body2 in MUI material version 5.10.5

[Sbasu2512]

Steps to reproduce

Link to live example: (required)

Steps:

1. Import Table and use it in a react component

Current behavior

Keep getting the following error:

TypeError: Cannot read properties of undefined (reading 'body2')

Expected behavior

Show a table

Context

import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';

<div>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>x</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell>y</TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </div>

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

"@mui/icons-material": "^5.10.3", "@mui/material": "^5.10.5", "node": ">=16.6.0", "next": "12.3.0", browser: chrome

Search keywords: undefined body2 MUI TABLE

[Sbasu2512]

updated mui to "@mui/material": "^5.15.7", still getting the same error message.

[mnajdova]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[Sbasu2512]

working fine in code sandbox but not in my next js app

[mnajdova]

Can you them provide a minimal reproduction. Sharing a public GH repo would also work.

[Sbasu2512]

here is the component:

import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import React, { useState } from 'react';
import useSWR from 'swr';

const fetcher = (...args) => fetch(...args).then((res) => res.json());

export default function SystemStatus() {
  const [isSessionRunning, setIsSessionRunning] = useState(false);
  const [isWorkflowRunning, setIsWorkflowRunning] = useState(false);
  const [isLiveScanRunning, setIsLiveScanRunning] = useState(false);
  const [isCalibrationLiveRunning, setIsCalibrationLiveRunning] =
    useState(false);
  const [isCalibrationFileRunning, setIsCalibrationFileRunning] =
    useState(false);
  const [power, setPower] = useState('');
  const [data, setData] = useState(null);
  const [cols, setCols] = useState([]);
  const [rows, setRows] = useState({});

  useSWR('/api/systemStatus', fetcher, {
    onSuccess: (data, _key, _config) => {
      if (data.status === 'SUCCESS') {
        console.log(data);
        setPower(data.result.power === 'inited' ? 'ON' : 'OFF');
        setIsSessionRunning(data.result.isScanRunning.Session);
        setIsWorkflowRunning(data.result.isScanRunning.Workflow);
        setIsLiveScanRunning(data.result.isScanRunning.livescan);
        setIsCalibrationLiveRunning(data.result.isScanRunning.calibration.live);
        setIsCalibrationFileRunning(data.result.isScanRunning.calibration.file);
        setData(data.result.telemetry_data);
      }
    },
    errorRetryInterval: 1000,
    onError: (_err, _key, _config) => {},
    dedupingInterval: 50,
    refreshInterval: 1000,
  });

  console.log(data);

  return (
    <div>
      <div>Power: {power}</div>
      <div>
        Current Scan :{' '}
        {isSessionRunning
          ? 'Session'
          : isWorkflowRunning
          ? 'Workflow'
          : isLiveScanRunning
          ? 'Live Scan'
          : isCalibrationLiveRunning
          ? 'Calibration Live'
          : isCalibrationFileRunning
          ? 'Calibration File'
          : 'No Scans are running'}{' '}
      </div>
      <div>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>x</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell>y</TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

[mnajdova]

Please create a public GH repository with a reproduction, otherwise we won't be able to create a reproduction and look into what may be the problem. I am closing the issue, if you provide a reproduction I would be happy to re-open it and look into the problem.

[Sbasu2512]

Made a repo but not able to reproduce the same error but some other errors are coming.

https://github.com/Sbasu2512/MuiTable

[mnajdova]

Made a repo but not able to reproduce the same error but some other errors are coming.

Can you open new issue if it is around other errors? It will help other community members to find relevant conversations in the future.

[mnajdova]

If you can't reproduce this issue, it may be related to some proprietary code you have in your application, I would recommend checking this.