使用Material UI的Button、Tooltip等组件时出现报错求助

云原生阿岚

2026-8-20

Material UI组件报错排查与解决

问题场景

使用Material UI的Button、Tooltip、Popover等组件时，浏览器控制台触发以下错误：

Uncaught ReferenceError: process is not defined
Uncaught TypeError: (intermediate value).shape is undefined
错误关联组件：<MuiButtonRoot>

代码示例

import * as React from 'react';
import DeleteIcon from '@mui/icons-material/Delete';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';

export default function BasicTooltip() {
  return (
    <Tooltip title="Delete">
      <IconButton>
        <DeleteIcon />
      </IconButton>
    </Tooltip>
  );
}

项目依赖配置

"dependencies": {
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@mui/icons-material": "^5.10.2",
    "@mui/joy": "^5.0.0-alpha.41",
    "@mui/material": "^5.10.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "styled-components": "^5.1.1",
    "web-vitals": "^0.2.4"
  },

解决方案

1. 处理`process is not defined`错误

该错误因react-scripts 4.x版本默认不在浏览器环境暴露process变量，而部分Material UI依赖会读取process.env导致：

推荐方案：升级react-scripts到5.x版本
```
npm install react-scripts@latest --save
```
替代方案：在public/index.html的<head>标签内添加全局变量声明
```
<script>
  window.process = { env: { NODE_ENV: '%NODE_ENV%' } };
</script>
```

2. 处理`(intermediate value).shape is undefined`错误

该错误通常与PropTypes依赖缺失或版本冲突有关：

安装prop-types依赖：
```
npm install prop-types --save
```
排查版本冲突：@mui/joy处于alpha测试阶段，可能与@mui/material 5.10.x存在兼容性问题。若未使用@mui/joy，可直接移除该依赖：
```
npm uninstall @mui/joy
```
重置依赖：删除现有依赖文件后重新安装
```
rm -rf node_modules package-lock.json
npm install
```