不能读取属性名;tagName为空，而使用svg

Question

这是SVG上的一个重复问题，但也许我的情况是不同的，我无法理解网络上的任何解决方案，因为我的问题是，低于错误

./src/Utility/assets/customer-delight-logo.svg中出现错误模块构建失败(from ./node_modules/@svgr/webpack/lib/index.js):TypeError:无法读取null属性(正在读取'tagName')at parse (C:Customer delightcustomerdelightnode_modulessvg-parserdistsvg-parser.umd.js:279:15)......

我的包。json包含

{
"name": "customerdelight",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"bootstrap": "^4.6.1",
"html-webpack-plugin": "^5.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev": "webpack serve"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.18.9",
"@babel/preset-env": "^7.18.9",
"@babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"cors": "^2.8.5",
"express": "^4.18.1",
"file-loader": "^6.2.0",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
}
}

这是我的代码

import Logo from '../../Utility/assets/customer-delight-logo.svg';
export default function Logocomp(){
return(
<div className="rad-logo-container">
<img src={Logo} alt="" height="50" width="140"/>
</div>
)
}

Thanks in advance!

Answer 1

尝试更新你的webpack配置来处理加载svg文件。在module.rules数组中，您应该添加以下内容:

{
test: /.(png|svg)$/,
use: ['file-loader']
}