【发布时间】：2021-10-21 00:04:58
【问题描述】：
问题
我正在尝试使用React DataGrid。但是我在浏览器中得到了一个堆栈跟踪，它捕获了一个 TypeError：无法读取未定义的属性“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 一起使用。如果是，您使用哪些版本？
更新
我收到了使用 4.12.3 版 material-ui 核心的建议。但是，问题仍然出现。我现在使用的版本是：
"@material-ui/data-grid": "^4.0.0-alpha.37",
"@material-ui/core": "4.12.3",
"@material-ui/lab": "4.0.0-alpha.58",
复制步骤
- 克隆/下载Repo
- 导航到文件夹
- npm 安装
- npm 开始
【问题讨论】：
-
将@material-ui/core 的版本降级到4.12.3 和@matrial-ui/lab 4.0.0-alpha 版本，这样做之后就可以工作了。
-
@SunnyGoel 感谢您的回复。我刚刚尝试了您的建议，现在我收到了不同的信息。无法解析模块“反应”。
-
你能把那个错误信息加在这里吗
-
@SunnyGoel 我重新启动了我的 IDE。我确实根据您的建议进行了测试，但我仍然收到“无法读取未定义的属性 useRef”。
-
我已将我的新版本添加到帖子本身。但错误仍然存在。
标签： javascript reactjs material-ui cross-browser