CODEWITHSUNDEEP
reactjstypescriptmaterial-uitanstack-tablematerial-react-table
Rem Asadullin
Rem Asadullin

Reputation: 1

Typescript error in MaterialReactTable filters: Cannot read properties of undefined (reading 'id')

Im using MaterialReactTable components from "material-react-table": "2.0.0-beta.9" library in my React app.

This error occurs only in built version(yarn build -> serve -s build) when I enter value in filter then when I clean filter value it crashes the app . In dev (yarn start) everything works just fine

Error:

Uncaught TypeError: Cannot read properties of undefined (reading 'id')
at n (getFilteredRowModel.ts:94:46)
at b (getFilteredRowModel.ts:92:66)
at getFilteredRowModel.ts:86:58
at Object._getFilteredRowModel (utils.ts:168:16)
at e.getFilteredRowModel (Filters.ts:613:20)
at e.getPreGroupedRowModel (Grouping.ts:344:47)
at e.getGroupedRowModel (Grouping.ts:351:22)
at e.getPreSortedRowModel (Sorting.ts:526:46)
at getSortedRowModel.ts:10:46
at Object._getSortedRowModel (utils.ts:153:21)

The current versions of libraries related to this issue are:

"@mui/material": "5.14.0",
"@mui/styles": "5.14.0",
"@tanstack/react-table": "8.9.3",
"material-react-table": "2.0.0-beta.9",
"react": "18.2.0",
"react-dom": "18.2.0",
"@types/react": "18.2.15",
"typescript": "^5.1.6"

I recently updated material-react-table to V2, also updated react an TS, it helped a little - before it crashed the built version of app with even touching filters

The component is pretty regular

   <MaterialReactTable
      data={data}
      columns={columns}
      initialState={{
        showColumnFilters: true,
        pagination: { pageIndex: 0, pageSize: 25 },
        density: "compact",
      }}
      muiTableContainerProps={{
        ref: tableRef, 
      }}
      state={{
        columnVisibility,
      }}
      onColumnVisibilityChange={setColumnVisibility}
      muiPaginationProps={{
        rowsPerPageOptions: [10, 25, 50, 100],
      }}
    />

Columns follow pretty much same pattern like this

   {
    accessorKey: "name",
    header: "Name",
    enablePinning: true,
    id: "name",
    Cell: ({ cell }) => {
      const value = cell.getValue<{ name: string; link: string | null }>();
      if (!value.link) return value.name;
      return (
        <a href={value.link} target="_blank" rel="noreferrer">
          {value.name}
        </a>
      );
    },
  },

data for this table is this TS type:

type TableRow = {
  id: string;
  namespace: string;
  ownerTeam: string;
  status: string;
  group: string | null;
  name: SetupTableName;
  reservedBy: string | null;
  reason: string | null;
  from: string | null;
  until: string | null;
  label: Label[];
  capability: Capability[];
};

At this point I simplified this table to the point when Im no longer using any custom logic and still get this error message and I run out of ideas, so any guesses are very welcome. Also please ask any clarifying questions. Thank you

Upvotes: 0

Views: 38

Answers (0)

Related Questions