Selepas pelayan Webpack ditambahkan, ralat MaterialUI (MUI): "getUtilityClass bukan fungsi"
Saya mengalami ralat ini selepas memulakan projek: Ralat masa jalan penyemak imbas. Satu-satunya perkara yang saya lakukan ialah menambah webpack. Berikut ialah rujukan untuk fail konfigurasi 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;
Kemudian saya mula mendapat ralat materialUI. Pada mulanya saya fikir saya mengemas kini fail package.json secara tidak sengaja, tetapi itu tidak berlaku. Saya juga ingin menunjukkan bahawa ia berfungsi sebelum menambah webpack. Apa yang saya lakukan ialah mengkonfigurasi pek web dan memasang beberapa kebergantungan (yang tidak menjejaskan kebergantungan atau versi sebelumnya!). Saya juga mengalami ralat lain selepas menambah webpack pada projek, yang saya tetapkan menggunakan perpustakaan 'patch-package', menggunakan fail patch berikut:
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',
Ini ialah pepijat sebelumnya yang telah diperbaiki dengan tampung:
Saya cuba menggunakan berbilang versi nod (nodejs) untuk melihat sama ada saya boleh mendapatkan ralat itu beberapa kali. Tetapi ia tidak berfungsi sama ada dalam nod 14.15.0 atau 18.15.0.
Satu lagi perkara pelik ialah saya tidak dapat mencari perkataan "getUtilityClass" dalam projek (gunakan ctr+shit+f dalam vsCode untuk mencari).
