Après l'ajout du serveur Webpack, erreur MaterialUI (MUI) : « getUtilityClass n'est pas une fonction »

Question

J'ai rencontré cette erreur après le démarrage du projet : Erreur d'exécution du navigateur. La seule chose que j'ai faite a été d'ajouter du webpack. Voici une référence pour le fichier de configuration du 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;

Ensuite, j'ai commencé à recevoir des erreurs MaterialUI. Au début, je pensais avoir accidentellement mis à jour le fichier package.json, mais ce n'est pas le cas. Je tiens également à souligner que cela fonctionnait avant d'ajouter webpack. Tout ce que j'ai fait a été de configurer Webpack et d'installer certaines dépendances (qui n'affectent pas les dépendances ou versions précédentes !). J'ai également rencontré une autre erreur après l'ajout de webpack au projet, que j'ai corrigée à l'aide de la bibliothèque 'patch-package', en utilisant le fichier patch suivant :

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

Il s'agit d'un bug précédent corrigé avec un patch :

J'ai essayé d'utiliser plusieurs versions de node (nodejs) pour voir si je pouvais obtenir l'erreur plusieurs fois. Mais cela ne fonctionne ni dans le nœud 14.15.0 ni dans 18.15.0.

Une autre chose étrange est que je ne trouve même pas le mot "getUtilityClass" dans le projet (trouvez-le en utilisant ctr+shit+f dans vsCode).

Answer 1

Le problème vient effectivement des dépendances. J'ai peut-être raté quelque chose lors de l'installation de certaines bibliothèques. Lorsque je suis revenu à l'ancien fichier package-json et que j'ai ajouté uniquement les dépendances dont j'avais besoin, après l'installation via npm install, le projet a bien fonctionné !