Material UI -单选按钮的Webpack错误
Material UI -单选按钮的Webpack错误
提问于 2021-05-23 14:29:55
我试图使用Material UI在我的应用程序中添加一个简单的RadioGroup，但由于某些原因，渲染阶段出现了问题。我创建了自己的webpack.config.js，我认为这可能是问题所在。
React代码非常简单：
...
<RadioGroup value={value} onChange={onChangeValue}>
{choices.map((choice) => (
<FormControlLabel
key={choice.id}
value={choice.value}
control={<Radio />}
label={choice.value}
/>
))}
</RadioGroup>
...控制台向我显示以下错误：
Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided
('http://localhost:3000/351d4e65888594b86254d833e9182a1f.js') is not a valid name.如果我打开那个文件，它会返回这个：
import * as React from 'react';
import createSvgIcon from '../../utils/createSvgIcon';
/**
* @ignore - internal component.
*/
export default createSvgIcon( /*#__PURE__*/React.createElement("path", {
d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0
18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
}), 'RadioButtonUnchecked');我的webpack.config.js是这样制作的：
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
entry: "./src/index.js",
mode: "development",
devServer: {
port: 3000,
historyApiFallback: true,
contentBase: "./",
hot: true,
},
output: {
filename: "bundle.[hash].js",
path: path.resolve(__dirname, "dist"),
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
],
resolve: {
modules: [__dirname, "src", "node_modules"],
extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: require.resolve("babel-loader"),
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.png|svg|jpg|gif$/,
use: ["file-loader"],
},
],
},
};回答 1
Stack Overflow用户
发布于 2021-05-23 14:36:42
我自己找到了答案，我只需要使用webpack5附带的新资产模块来编辑webpack.config.js：
...
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: require.resolve("babel-loader"),
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.png|jpg|gif$/,
use: ["file-loader"],
},
{
test: /\.svg$/,
type: "asset/resource",
},
],
},
...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67656824
复制相关文章
相似问题
腾讯云开发者
