Sunday, 22 August 2021

React Material UI DataGrid: Cannot read property 'useRef' of undefined

The problem

I am trying to use the React DataGrid. But I am getting a stacktrace in the browser where it caughts a TypeError: Cannot read property 'useRef' of undefined. StackTrace error

What have I tried

I have tried using different versions of the React DataGrid. Also I have tried different versions of React Core / Styles.

Where do I think the underlaying issue is

I think it has something to do with the Parcel Bundler. A colleague does not experience this issue and he is using react-scripts.

What am I using

I am just using the example code from the official documentation. Which looks like below.

import React, { Component } from 'react';
import './HomePage.scss';
import { DataGrid } from '@material-ui/data-grid';

const rows = [
    { id: 1, col1: 'Hello', col2: 'World' },
    { id: 2, col1: 'XGrid', col2: 'is Awesome' },
    { id: 3, col1: 'Material-UI', col2: 'is Amazing' },
];

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

export default class HomePage extends Component {
    render() {
        return (
            <div style=>
                <DataGrid rows={rows} columns={columns} />
            </div>
        );
    }
}

So I think my packages are more important. I listed the important ones below.

"@material-ui/data-grid": "^4.0.0-alpha.37",
"@material-ui/core": "5.0.0-alpha.30",
"@material-ui/lab": "5.0.0-alpha.30",
"parcel-bundler": "^1.12.4",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"

Any insights are welcome. Did someone else manage to get Material UI working with Parcel. If yes, which versions do you use?



from React Material UI DataGrid: Cannot read property 'useRef' of undefined

No comments:

Post a Comment