DataGrid: Cannot read properties of undefined (reading 'mode')

[jjrise]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

import type { GridColDef, GridRowsProp } from "@mui/x-data-grid";
import { DataGrid } from "@mui/x-data-grid";

const rows: GridRowsProp = [
  { id: 1, col1: "Hello", col2: "World" },
  { id: 2, col1: "DataGridPro", col2: "is Awesome" },
  { id: 3, col1: "MUI", col2: "is Amazing" },
];

const columns: GridColDef[] = [
  { field: "col1", headerName: "Column 1", width: 150 },
  { field: "col2", headerName: "Column 2", width: 150 },
];

export default function RecipesTable() {
  return (
    <div style={{ height: 700, width: "100%" }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  );
}

Current behavior 😯

Uncaught TypeError: Cannot read properties of undefined (reading 'mode')
    at eval (GridRootStyles.js?25e1:114:1)
    at transformedStyleArg (createStyled.js?f573:179:1)
    at handleInterpolation (emotion-serialize.browser.esm.js?c6a2:139:1)


The above error occurred in the <MuiDataGridRoot> component:

    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js:57:66)
    at GridRoot (webpack-internal:///./node_modules/@mui/x-data-grid/components/containers/GridRoot.js:55:100)
    at GridContextProvider (webpack-internal:///./node_modules/@mui/x-data-grid/context/GridContextProvider.js:16:3)
    at DataGrid (webpack-internal:///./node_modules/@mui/x-data-grid/DataGrid/DataGrid.js:30:84)

Expected behavior 🤔

Render a basic DataGrid component

Context 🔦

I'm trying to render a basic DataGrid table using the basic demo. I have installed all dependencies but getting a typeerror.

Your environment 🌎

This is a next.js project using the T3 stack. I also have Mantine installed which has a context wrapper around my app root.

npx @mui/envinfo

System: OS: macOS 13.2 Binaries: Node: 16.14.0 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 8.19.2 - /usr/local/bin/npm Browsers: Chrome: 108.0.5359.124 Edge: Not Found Firefox: 88.0.1 Safari: 16.2 npmPackages: @emotion/react: ^11.10.5 => 11.10.5 @emotion/styled: ^11.10.5 => 11.10.5 @mui/base: 5.0.0-alpha.113 @mui/core-downloads-tracker: 5.11.4 @mui/icons-material: ^5.11.0 => 5.11.0 @mui/material: ^5.11.4 => 5.11.4 @mui/private-theming: 5.11.2 @mui/styled-engine: 5.11.0 @mui/system: 5.11.4 @mui/types: 7.2.3 @mui/utils: 5.11.2 @mui/x-data-grid: ^5.17.18 => 5.17.18 @types/react: ^18.0.14 => 18.0.26 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.8.4 => 4.9.4

Order ID 💳 (optional)

No response

[jjrise]

in case it helps anyone else, I needed to wrap the app in a and that solved the issue

[punit1108]

In a what?

[jjrise]

In a what?

Weird, not sure what happened there. But wrapped it in a ThemeProvider

[punit1108]

Tried putting ThemeProvider around DataGrid, but still getting same error. BTW, the error reads -

Any ideas?

[jjrise]

Are you passing in a Theme to the provider?

[punit1108]

Are you passing in a Theme to the provider?

Yes i am

[jjrise]

this is what worked for me... if I remember right, I had to add the MuiDataGrid object to createTheme. Who knows?

const MuiTheme = createTheme({
  palette: {
    mode: "dark",
  },
  components: {
    MuiDataGrid: {
      styleOverrides: {
        root: {
          border: 1,
          borderColor: colors.primaryGrayMid,
          borderStyle: "solid",
          borderRadius: 10,
          boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.25)",
          backgroundColor: colors.primaryGrayDark,
          color: "#C1C2C5",
          padding: 10,
        },
      },
    },
  },
});

 <ThemeProvider theme={MuiTheme}>
     {...}
 </ThemeProvider>

[Spike433]

Does someone know what is workaround for extendTheme?

I'm getting Uncaught TypeError: theme.vars.palette.TableCell is undefined

I tried with MuiDataGrid and vars but none of it works.

export function createTheme(primaryColor: PrimaryColor): Theme {

 return extendTheme({
components: {
MuiDataGrid: {
        styleOverrides: {
          root: {
            border: 1,
            borderStyle: 'solid',
            borderRadius: 10,
            boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.25)',
            color: '#C1C2C5',
            padding: 10,
          },
          TableCell: {
            // Add your TableCell styles here
            backgroundColor: '#fff', // replace '#colorValue' with the actual color value
            border: '#fff', // replace '#borderColor' with the actual border color value
            // other TableCell styles...
          },
        },
},
vars: {
      palette: {
        TableCell: {
          border: '#fff', // replace '#borderColor' with the actual border color value
          // ...existing vars.palette.TableCell properties
        },
        // ...existing vars properties
      },
    },
}

[mennovf]

Does someone know what is workaround for extendTheme?

I'm getting Uncaught TypeError: theme.vars.palette.TableCell is undefined

Has there been progress on this? I'm facing the same issue.

[Spike433]

Yes.

I created MUI wrapper inside joy-ui since there was Theme collision.

import * as React from 'react';
import {
  Experimental_CssVarsProvider as CssVarsProvider,
  experimental_extendTheme as extendTheme,
} from '@mui/material/styles';

const baseTheme = extendTheme();

const darkTheme = extendTheme({
  colorSchemes: {
    light: baseTheme.colorSchemes.dark,
    dark: baseTheme.colorSchemes.dark,
    // dark: {
    //   palette: {
    //     background: {
    //       default: '#2e353d',
    //     },
    //     text: {
    //       primary: '#e9e9e9',
    //       secondary: '#cacaca',
    //     },
    //   },
    // },
  },
});

export interface DataGridThemeProps {
  children: React.ReactNode;
}

export function DataGridTheme({
  children,
}: DataGridThemeProps): React.JSX.Element {
  return (
    <CssVarsProvider
      defaultMode="dark"
      disableNestedContext
      theme={darkTheme}
    >
      {children}
    </CssVarsProvider>
  );
}

<DataGridTheme>
                  <AdvancedTable (DataGrid)
                    columns={columns}
                    rows={probeDetails?.attack_results || []}
                  />
                </DataGridTheme>

[mennovf]

Wrapping the MUI datagrid in a MUI CssVarsProvider with a MUI extendTheme created theme fixed it. Thanks!