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=>
<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