React应用中MUI Material与Icon具名导出报模块未找到错误

使用MUI时采用具名导入出现模块未找到错误，已参考MUI官方文档的babel-plugin方案优化打包体积，但问题依旧。以下是相关配置文件及代码：

package.json #

"dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.10.14",
    "@mui/material": "^5.10.14",
    "@mui/styled-engine-sc": "^5.10.6",
    "@reduxjs/toolkit": "^1.8.6",
    "@stripe/react-stripe-js": "^1.14.2",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "cors": "^2.8.5",
    "react": "^18.2.0",
    "react-bootstrap": "^2.5.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.38.0",
    "react-loadingmask": "^4.0.6",
    "react-redux": "^8.0.4",
    "react-router-dom": "^6.4.1",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.5",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "babel-plugin-import": "^1.13.5",
    "css-loader": "^6.7.1",
    "customize-cra": "^1.0.0",
    "react-app-rewired": "^2.2.1",
    "source-map-loader": "^4.0.1",
    "tailwindcss": "^3.1.8"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

.babelrc.js #

const plugins = [
  [
    'babel-plugin-import',
    {
      libraryName: '@mui/material',
      libraryDirectory: '',
      camel2DashComponentName: false,
    },
    'core',
  ],
  [
    'babel-plugin-import',
    {
      libraryName: '@mui/icons-material',
      libraryDirectory: '',
      camel2DashComponentName: false,
    },
    'icons',
  ],
];

module.exports = { plugins };

config-overrides.js #

/* config-overrides.js */
/* eslint-disable react-hooks/rules-of-hooks */
const { useBabelRc, override } = require('customize-cra');

module.exports = override(useBabelRc());

组件导入代码（src/component/AppBarMain.jsx） #

import { AccountCircle, AddCommentIcon, MailIcon, MenuIcon, MoreIcon, SearchIcon } from '@mui/icons-material';
import { alpha, AppBar, Badge, Box, Button, IconButton, InputBase, Menu, MenuItem, Toolbar, Typography } from '@mui/material';

报错截图 #

问题排查与解决方案 #

1. 图标组件名称错误（核心原因） #

报错明确显示无法找到@mui/icons-material/AddCommentIcon，这是因为MUI绝大多数图标组件的名称不带Icon后缀。你写的AddCommentIcon、MailIcon、SearchIcon都是错误的，正确的导入应为：

import { AccountCircle, AddComment, Mail, MenuIcon, MoreIcon, Search } from '@mui/icons-material';

注：MenuIcon和MoreIcon是例外，它们的名称确实包含Icon后缀，其余图标如AddComment、Mail、Search均无需添加。

2. babel-plugin-import配置优化 #

当前配置中libraryDirectory设为空，可能导致模块解析路径错误。建议修改为esm以适配MUI v5的ES模块结构，更新后的.babelrc.js：

const plugins = [
  [
    'babel-plugin-import',
    {
      libraryName: '@mui/material',
      libraryDirectory: 'esm',
      camel2DashComponentName: false,
    },
    'core',
  ],
  [
    'babel-plugin-import',
    {
      libraryName: '@mui/icons-material',
      libraryDirectory: 'esm',
      camel2DashComponentName: false,
    },
    'icons',
  ],
];

module.exports = { plugins };

3. 工具兼容性修复 #

react-scripts 5.x与customize-cra 1.x存在兼容性问题，可通过以下方式解决：

• 升级customize-cra到最新版本：

npm install customize-cra@latest --save-dev

• 或者改用craco替代react-app-rewired，craco对react-scripts 5的支持更稳定。

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