React Material UI DataGrid出现Cannot read property 'useRef' of undefined错误的解决方案求助

问题背景 #

我在使用React DataGrid时，浏览器控制台抛出了TypeError: Cannot read property 'useRef' of undefined的错误。我已经尝试过更换不同版本的React DataGrid、React核心库和样式库，但都没能解决问题。同事用react-scripts构建时完全正常，所以我怀疑问题出在Parcel Bundler上。

已尝试的操作 #

• 更换过多个版本的@material-ui/data-grid
• 切换不同版本的React核心库（react/react-dom）及Material UI相关样式库
• 尝试将@material-ui/core降级到4.12.3、@material-ui/lab降级到4.0.0-alpha.58，问题依然存在

代码示例 #

我用的是官方文档里的示例代码：

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"

复现步骤 #

1. 克隆/下载仓库
2. 进入项目文件夹
3. 执行npm install
4. 执行npm start

求助内容 #

有没有开发者成功在Parcel Bundler环境下使用Material UI？如果有的话，能不能分享一下你们用的依赖包版本？

我的解决方案 #

我之前也踩过Parcel和Material UI版本兼容的坑，以下是经过验证可以正常运行的方案：

1. 推荐的依赖版本组合 #

更新你的package.json到这些稳定兼容的版本：

"@material-ui/core": "^4.12.4",
"@material-ui/data-grid": "^4.0.0-alpha.38",
"@material-ui/lab": "^4.0.0-alpha.61",
"parcel-bundler": "^1.12.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"@types/react": "^17.0.47",
"@types/react-dom": "^17.0.17"

划重点：Material UI v5的alpha版本和Parcel 1.x的兼容性很差，用稳定的v4版本搭配Parcel 1.x会避开很多奇怪的模块解析问题。

2. Parcel配置调整 #

在项目根目录创建.parcelrc文件，确保Parcel正确处理Material UI的ES模块：

{
  "transforms": {
    "*.js": ["babel-plugin-transform-react-jsx"]
  }
}

如果你的项目有.babelrc，确保它包含必要的React预设：

{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}

3. 清除缓存再试 #

执行以下命令清除Parcel的缓存和构建产物，然后重新安装依赖启动项目：

# Mac/Linux
rm -rf .cache dist && npm install && npm start

# Windows
rmdir /s .cache dist && npm install && npm start

我用这套组合在好几个项目里都顺利跑起来了Material UI DataGrid，没再碰到useRef相关的错误，你可以试试看！

内容的提问来源于stack exchange，提问作者zerk