React引入@material-ui/icons/FileUpload报模块未找到如何解决

• 版本不匹配：你安装的是v4版本的@material-ui/icons（版本号4.11.3），这个版本的图标库中不存在FileUpload这个图标，对应的文件上传类图标名为CloudUpload。FileUpload图标是MUI v5版本（包名已改为@mui/*系列）才新增的图标，从不存在的模块路径导入自然触发找不到模块的报错。
• 导入写法错误：即使对应图标存在，你写的import { FileUploadIcon } from '@material-ui/icons/FileUpload'写法也有问题：@material-ui/icons的子路径文件是默认导出单个图标组件，不支持花括号的具名导入写法。

你可以根据自己的需求二选一：

方案1：不升级现有v4依赖（改动最小） #

直接使用v4版本内置的CloudUpload图标替代不存在的FileUpload即可，不需要修改依赖版本。
修改导入代码：

// 替换原来的FileUpload导入语句
import CloudUploadIcon from '@material-ui/icons/CloudUpload';

修改使用代码，替换图标组件，顺带修正JSX的属性错误（for是JS保留字，React中需要写成htmlFor）：

<input type="file" id="file" onChange={checkJSON}/>
<label htmlFor="file">
  <CloudUploadIcon />
  Choose a JSON file
</label>

方案2：升级到MUI v5使用FileUploadIcon #

如果你必须使用FileUpload图标，可以升级到MUI v5版本：

• 先卸载旧版本依赖：

npm uninstall @material-ui/core @material-ui/icons

• 安装v5版本所需依赖：

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

• 修改导入语句为新版包路径：

import FileUploadIcon from '@mui/icons-material/FileUpload';

之后就可以正常在JSX中使用<FileUploadIcon />组件了。

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