next.jsmaterial-react-table

TypeError: Cannot read properties of undefined (reading 'mode') Material React Table Next js application

enter image description hereI 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.

Solution

  • You see this behaviour because the material ui library uses library Mantine under the hood. This requirement is not declared, but if your project already uses Mantine, then there could be a compatibility issue. Try to update Mantine to the latest version.