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

Question

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.

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={{ height: 300, width: '100%' }}>
                <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?

Update

I am getting the suggestion to use version 4.12.3 of material-ui core. However, the problem still appears. The versions I am using right now are:

"@material-ui/data-grid": "^4.0.0-alpha.37",
"@material-ui/core": "4.12.3",
"@material-ui/lab": "4.0.0-alpha.58",

Steps to reproduce

• Clone/download Repo
• Navigate to the folder
• npm install
• npm start

Answer 1

Problem solved by updating parcel to version 2.

So I removed >

"parcel-bundler": "^1.12.4"

And I added >

"parcel": "^2.0.0-rc.0"