添加Webpack后出现MaterialUI getUtilityClass is not a function错误求助

问题背景 #

• 添加自定义Webpack配置后，项目启动出现浏览器运行时错误：getUtilityClass is not a function
• 此前项目可正常运行，未改动原有依赖版本
• 曾用patch-package修复过SvgIcon相关错误，尝试Node.js 14.15.0和18.15.0版本无效，项目内搜索不到「getUtilityClass」字样

核心原因 #

错误源于Material UI类名生成逻辑与Webpack打包解析的冲突：之前的SvgIcon补丁错误修改了composeClasses（来自@mui/base）的参数类型——该方法第二个参数要求传入类名生成函数（如getSvgIconUtilityClass），但补丁直接传入了类名字典svgIconClasses；加上Webpack默认排除所有node_modules的转译，导致MUI模块打包后出现逻辑异常。

解决步骤 #

1. 修正SvgIcon补丁逻辑 #

将错误的补丁替换为符合composeClasses参数要求的版本，示例diff：

diff --git a/node_modules/@mui/material/SvgIcon/SvgIcon.js b/node_modules/@mui/material/SvgIcon/SvgIcon.js
index 9c80c7b..a123456 100644
--- a/node_modules/@mui/material/SvgIcon/SvgIcon.js
+++ b/node_modules/@mui/material/SvgIcon/SvgIcon.js
@@ -8,7 +8,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import capitalize from '../utils/capitalize';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
-import { getSvgIconUtilityClass } from './svgIconClasses';
+import { getSvgIconUtilityClass, svgIconClasses } from './svgIconClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -20,7 +20,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', color !== 'inherit' && `color${capitalize(color)}`, `fontSize${capitalize(fontSize)}`]
   };
-  return composeClasses(slots, getSvgIconUtilityClass, classes);
+  return composeClasses(slots, getSvgIconUtilityClass, classes, svgIconClasses);
 };
 const SvgIconRoot = styled('svg', {
   name: 'MuiSvgIcon',

执行npx patch-package重新生成补丁文件，确保补丁适配当前依赖版本。

2. 调整Webpack配置，修复模块转译问题 #

修改Webpack配置中module.rules的JS/JSX规则，允许转译@mui、@emotion等核心依赖模块（默认排除node_modules会导致这些模块未被正确转译）：

module: {
  noParse: [/\/node_modules\/@tanstack\/react-query-devtools\//],
  rules: [
    {
      test: /\.(js|jsx)$/,
      use: 'babel-loader',
      // 排除node_modules但保留需要转译的MUI相关模块
      exclude: /node_modules\/(?!(@mui|@emotion)\/)/
    },
    // 其他规则保持不变...
  ]
}

3. 清理缓存并重新构建 #

• 删除node_modules目录和package-lock.json（或yarn.lock）
• 重新执行npm install（或yarn install）
• 删除dist目录，执行npm run build（或启动dev server）重新打包

4. 验证修复 #

启动项目后检查浏览器控制台，确认getUtilityClass is not a function错误消失，SvgIcon组件正常渲染。

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