React Material UI DataGrid：无法读取未定义的属性“useRef”

Question

问题

我正在尝试使用React DataGrid。但是我在浏览器中得到一个堆栈跟踪，它捕获了一个类型错误：无法读取未定义的属性“useRef”。

我试过什么

我尝试使用不同版本的 React DataGrid。我也尝试过不同版本的 React Core / Styles。

我认为底层问题在哪里

我认为这与 Parcel Bundler 有关。一位同事没有遇到这个问题，他正在使用 react-scripts。

我在用什么

我只是使用官方文档中的示例代码。如下所示。

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>
        );
    }
}

所以我认为我的包裹更重要。我在下面列出了重要的。

"@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"

欢迎任何见解。其他人是否设法让 Material UI 与 Parcel 一起工作。如果是，您使用哪些版本？

更新

我收到了使用 material-ui 核心版本 4.12.3 的建议。但是，问题仍然出现。我现在使用的版本是：

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

重现步骤

• 克隆/下载Repo
• 导航到文件夹
• 安装
• 启动

Answer 1

通过将 Parcel 更新到版本 2 解决了问题。

所以我删除了>

"parcel-bundler": "^1.12.4"

我添加了>

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