I encountered this error after starting the project: Browser runtime error. The only thing I did was add webpack. Here is the reference for the webpack configuration file:
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;
Then I started getting materialUI errors. At first I thought I accidentally updated the package.json file, but that's not the case. I also want to point out that it worked before adding webpack. All I did was configure webpack and install some dependencies (which don't affect previous dependencies or versions!). I also encountered another error after adding webpack to the project, which I fixed using the 'patch-package' library, using the following patch file:
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',
This is a previous bug fixed with a patch:
I tried using multiple versions of node (nodejs) to see if I could get the error multiple times. But it doesn't work either in node 14.15.0 or 18.15.0.
Another strange thing is that I can't even find the word "getUtilityClass" in the project (use ctr shit f in vsCode to find it).
P粉5390555262023-09-15 16:03:44
The problem does lie in the dependencies. I might have missed something when installing some libraries. When I reverted to the old package-json file and added only the dependencies I needed, after installing via npm install, the project worked fine!