Cannot read property length of undefined (Generated Materia-UI Data Table)

[mecirmartin]

This error is thrown when trying to inject newly generated page into demo App Most probably problem with @material-ui/data-grid component (invalid props passed?)

I was able to reproduce the problem by running this code inside newly created CRA

45

[jozef-slezak]

@mecirmartin , could you paste the generated code snippet here?

@mat-app, please, reproduce (test generated code) using https://github.com/iteria-app/example-material-ui. Maybe, just variable/array (that is supposed to be visualised using materia-ui data table) is null (if so consider default valuevariable ?? []).

[mecirmartin]

This is generated page

import { GridColParams,DataGrid } from "@material-ui/data-grid";
import * as React from "react";
export default function DataTableComponent({ customers }) {
    const intl = useIntl();
    const columns = [
        { field: "avatarUrl", type: "string", valueFormatter: ({ value }) => value, renderHeader: (params: GridColParams) => (<FormattedMessage id="Customer.avatarUrl" defaultMessage="avatarUrl"/>) },
        { field: "createdAt", type: "date", valueFormatter: ({ value }) => intl.formatDate(value), renderHeader: (params: GridColParams) => (<FormattedMessage id="Customer.createdAt" defaultMessage="createdAt"/>) },
        { field: "email", type: "string", valueFormatter: ({ value }) => value, renderHeader: (params: GridColParams) => (<FormattedMessage id="Customer.email" defaultMessage="email"/>) },
        { field: "id", type: "string", valueFormatter: ({ value }) => value, renderHeader: (params: GridColParams) => (<FormattedMessage id="Customer.id" defaultMessage="id"/>) },
        { field: "name", type: "string", valueFormatter: ({ value }) => value, renderHeader: (params: GridColParams) => (<FormattedMessage id="Customer.name" defaultMessage="name"/>) },
        { field: "phone", type: "string", valueFormatter: ({ value }) => value, renderHeader: (params: GridColParams) => (<FormattedMessage id="Customer.phone" defaultMessage="phone"/>) },
        { field: "updatedAt", type: "date", valueFormatter: ({ value }) => intl.formatDate(value), renderHeader: (params: GridColParams) => (<FormattedMessage id="Customer.updatedAt" defaultMessage="updatedAt"/>) }
    ];
    return (<div style={{ height: 400, width: "100%" }}>            <DataGrid columns={columns} rows={customers}/>          </div>);
}

[mat-app]

Basic problem would be that integration generator into demo project is not finished yet. Another page should be overidden by generation and there is also component name mismatch. I hope that this causes these errors