React Icons无法解析致编译失败，多次安装仍报错求解决

数据老陈

2026-7-2

解决React编译中的Module Not Found错误

一、修复react-icons子模块无法解析的问题

适配react-icons版本要求
若安装的是react-icons v5.x版本，该版本将各图标库拆分为独立包，仅安装react-icons主包无法导入ai/io等子模块，需单独安装对应图标集：
```
npm install @react-icons/ai @react-icons/io
```
若想沿用旧版导入语法（import { ... } from 'react-icons/ai'），可降级到v4.x稳定版：
```
npm uninstall react-icons
npm install react-icons@4.12.0
```

核对导入语句拼写
确认代码中导入路径无拼写错误，正确格式示例：

import { AiOutlineSearch } from 'react-icons/ai';
import { IoIosMenu } from 'react-icons/io';

二、修复./Body.jsx文件找不到的问题

校验文件路径与大小写
- 确认Body.jsx文件存在于当前组件的同级目录，未被误放至子目录或上级目录。
- 注意系统大小写敏感性：Linux/macOS下文件名区分大小写，若实际文件名为body.jsx而代码中写./Body.jsx会导致查找失败，需统一大小写。

检查构建工具的扩展名配置

若使用Webpack，确保resolve.extensions数组包含.jsx，示例配置：

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  }
};

若使用Vite，默认已支持.jsx，可确认vite.config.js中resolve.extensions未移除该后缀：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    extensions: ['.mjs', '.js', '.jsx', '.json']
  }
});