Nach dem Hinzufügen des Webpack-Servers tritt MaterialUI (MUI)-Fehler auf: „getUtilityClass ist keine Funktion“

Question

Nach dem Start des Projekts ist dieser Fehler aufgetreten: Laufzeitfehler des Browsers. Das Einzige, was ich getan habe, war, Webpack hinzuzufügen. Hier ist eine Referenz für die Webpack-Konfigurationsdatei:

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;

Dann bekam ich MaterialUI-Fehler. Zuerst dachte ich, ich hätte versehentlich die Datei package.json aktualisiert, aber das ist nicht der Fall. Ich möchte auch darauf hinweisen, dass es vor dem Hinzufügen von Webpack funktioniert hat. Ich habe lediglich das Webpack konfiguriert und einige Abhängigkeiten installiert (die keine Auswirkungen auf frühere Abhängigkeiten oder Versionen haben!). Außerdem ist nach dem Hinzufügen von Webpack zum Projekt ein weiterer Fehler aufgetreten, den ich mithilfe der „Patch-Package“-Bibliothek und der folgenden Patch-Datei behoben habe:

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',

Dies ist ein früherer Fehler, der mit einem Patch behoben wurde:

Ich habe versucht, mehrere Versionen von Node (nodejs) zu verwenden, um zu sehen, ob der Fehler mehrmals auftreten könnte. Aber es funktioniert weder im Knoten 14.15.0 noch im Knoten 18.15.0.

Eine weitere seltsame Sache ist, dass ich nicht einmal das Wort „getUtilityClass“ im Projekt finden kann (finde es mit Strg+Scheiße+F in vsCode).

Answer 1

问题确实出在依赖关系上。在安装某些库时，我可能漏掉了一些东西。当我恢复到旧的package-json文件，并只添加我需要的依赖后，通过npm install安装后，项目就正常工作了！