I am getting this error in a Next js application that has a Material React Table.
import * as React from 'react';
import SimpleSidebar from '@/components/SideBar';
import Head from 'next/head';
import { Flex, Text, Box } from '@chakra-ui/layout';
import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
//example data type
type Person = {
name: {
firstName: string;
lastName: string;
};
address: string;
city: string;
state: string;
};
const data: Person[] = [
{
name: {
firstName: 'John',
lastName: 'Doe'
},
address: '261 Erdman Ford',
city: 'East Daphne',
state: 'Kentucky'
},
{
name: {
firstName: 'Jane',
lastName: 'Doe'
},
address: '769 Dominic Grove',
city: 'Columbus',
state: 'Ohio'
},
{
name: {
firstName: 'Joe',
lastName: 'Doe'
},
address: '566 Brakus Inlet',
city: 'South Linda',
state: 'West Virginia'
},
{
name: {
firstName: 'Kevin',
lastName: 'Vandy'
},
address: '722 Emie Stream',
city: 'Lincoln',
state: 'Nebraska'
},
{
name: {
firstName: 'Joshua',
lastName: 'Rolluffs'
},
address: '32188 Larkin Turnpike',
city: 'Omaha',
state: 'Nebraska'
}
];
const Statements: React.FC = () => {
const columns = React.useMemo<MRT_ColumnDef<Person>[]>(
() => [
{
accessorKey: 'name.firstName', //access nested data with dot notation
header: 'First Name',
size: 150
},
{
accessorKey: 'name.lastName',
header: 'Last Name',
size: 150
},
{
accessorKey: 'address', //normal accessorKey
header: 'Address',
size: 200
},
{
accessorKey: 'city',
header: 'City',
size: 150
},
{
accessorKey: 'state',
header: 'State',
size: 150
}
],
[]
);
return (
<SimpleSidebar location="statements">
<Head>
<title>Staff Dashboard | Notes</title>
<meta name="description" content="Description goes here" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Flex align="center" h="95px" bg="white" pl="30px">
<Text as="h2" mb="0">
All Statements
</Text>
</Flex>
<Box>
<MaterialReactTable columns={columns} data={data} />;
</Box>
</SimpleSidebar>
);
};
export default Statements;
I tried to check if the Material Ui V5 packages in my project were matching what is needed for material-react-table and they were mathing. I also uninstalled the roject dependnecies and re-isntalled a fresh. I created a new next js project separately and it worked okay.