Webpack伺服器新增後，MaterialUI（MUI）錯誤："getUtilityClass 不是函數"

Question

我在啟動專案後遇到了這個錯誤： 瀏覽器運行時錯誤。 我唯一做的事情就是添加webpack。這是webpack設定檔的參考：

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');

const config = {
  entry: './src/index.tsx',
  mode: 'development',
  devtool: 'source-map',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    noParse: [/\/node_modules\/@tanstack\/react-query-devtools\//],
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.png$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              mimetype: 'image/png'
            }
          }
        ]
      },
      {
        test: /\.svg$/,
        use: 'file-loader'
      },
      {
        test: /\.ts(x)?$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new Dotenv(),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  resolve: {
    extensions: [
      '.tsx',
      '.ts',
      '.js'
    ]
  },
  devServer: {
    port: 3000, // 将端口3000添加到开发服务器
    hot: true, // 启用热模块替换（HMR）
    open: true, // 服务器启动时在默认浏览器中打开应用程序
    static: {
      directory: path.resolve(__dirname, 'dist'), // 设置用于提供文件的基本目录
    }
  }
};

module.exports = config;

然後我開始遇到materialUI錯誤。起初我以為是我不小心更新了package.json文件，但事實並非如此。我還想指出的是，在添加webpack之前它是可以工作的。我所做的只是配置webpack並安裝一些依賴項（這些依賴項不會影響先前的依賴項或版本！）。 在將webpack新增至專案後，我還遇到了另一個錯誤，我使用'patch-package'庫進行了修復，使用以下補丁檔案：

diff --git a/node_modules/@mui/material/SvgIcon/SvgIcon.js b/node_modules/@mui/material/SvgIcon/SvgIcon.js
index 9c80c7b..b254159 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 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, svgIconClasses, classes);
 };
 const SvgIconRoot = styled('svg', {
   name: 'MuiSvgIcon',

這是透過補丁修復的先前錯誤：

我嘗試使用多個版本的node（nodejs）來查看是否可以多次遇到錯誤。但無論是在node 14.15.0或18.15.0中都無法運作。

另一個奇怪的事情是，我甚至在專案中找不到"getUtilityClass"這個詞（在vsCode中使用ctr shit f查找）。

Answer 1

問題確實出在依賴關係。在安裝某些函式庫時，我可能漏掉了一些東西。當我恢復到舊的package-json文件，並只添加我需要的依賴後，通過npm install安裝後，專案就正常工作了！