我在启动我的项目后得到了这个错误:Browser Runtime Error.我唯一做的就是添加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, // Add port 3000 to the development server
hot: true, // Enable Hot Module Replacement (HMR)
open: true, // Open the application in the default browser when the server starts
static: {
directory: path.resolve(__dirname, 'dist'), // Set the base directory for serving files
}
}
};
module.exports = config;
字符串
我开始得到materialUI错误。一开始我以为这是因为我不小心更新了json文件包,但事实并非如此。我还想指出的是,在添加webpack之前,它已经工作了。我所做的只是配置webpack并安装一些依赖项(这并不影响以前的依赖项或版本!).我还得到了一个错误后,添加webpack到项目中,我使用'补丁包'库修复,与此补丁文件:
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 was the previous error that was fixed through the patch:的
我尝试了多个节点版本(nodejs),看看我是否会多次遇到错误。它在节点14.15.0和18.15.0中都不起作用。
另一件奇怪的事情是,我甚至在我的项目中找不到“getUtilityClass”这个词(在vsCode中使用ctr + shit + f找到它之后)。
1条答案
按热度按时间t98cgbkg1#
问题确实出在依赖关系上。我可能在安装一些库时错过了一些东西。当我恢复到旧的package-json并只添加我需要的依赖项时,在npm安装后,项目工作了!