为什么我无法在 SVG 上读取 属性 'tagName' of null？
Why I'm getting Cannot read property 'tagName' of null on a SVG?
我在更新包 JSON 文件中的包后收到此错误。
./src/assets/img/pickUp.svg (./node_modules/@svgr/webpack/lib?-svgo,+titleProp,+ref!./src/assets/img/pickUp.svg)
TypeError: Cannot read property 'tagName' of null
我只是像这样导入 svg 文件：
在更新软件包之前，我已经检查过补丁是否正确并且可以正常工作。
import { ReactComponent as Moped } from '../../assets/img/moped.svg';
这是包 JSON 文件：
"dependencies": {
"@atlaskit/css-reset": "^6.0.5",
"@elastic/charts": "^38.0.1",
"@elastic/datemath": "^5.0.3",
"@elastic/eui": "^40.0.0",
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-brands-svg-icons": "^5.15.2",
"@fortawesome/free-regular-svg-icons": "^5.15.2",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/react-fontawesome": "^0.1.16",
"@sentry/browser": "^6.13.3",
"@sentry/react": "^6.13.3",
"@sentry/tracing": "^6.13.3",
"@synapsestudios/react-drop-n-crop": "^0.2.0",
"axios": "^0.23.0",
"babel-jest": "^26.6.0",
"babel-loader": "^8.1.0",
"base64-img": "^1.0.4",
"canvg": "^3.0.7",
"cra-append-sw": "^2.7.0",
"date-fns": "^2.14.0",
"electron-firebase": "^1.2.0",
"electron-is-dev": "^2.0.0",
"electron-log": "^4.4.1",
"electron-pos-printer": "^1.2.4",
"electron-print": "^1.0.2",
"electron-push-receiver": "^2.1.3",
"emoji-mart": "^3.0.0",
"eslint": "^7.11.0",
"firebase": "^7.24.0",
"font-awesome": "^4.7.0",
"g": "^2.0.1",
"google-map-react": "^2.1.9",
"i": "^0.3.6",
"image-to-base64": "^2.1.1",
"jest": "^26.6.0",
"little-state-machine": "^4.1.2",
"lodash": "^4.17.20",
"moment": "^2.27.0",
"moment-timezone": "^0.5.31",
"node-sass": "^6.0.1",
"npm": "^8.1.0",
"pretty-time": "^1.1.0",
"raven-js": "^3.27.2",
"rc-time-picker": "^3.7.3",
"react": "^17.0.2",
"react-beautiful-dnd": "^13.0.0",
"react-big-calendar": "^0.38.0",
"react-compound-timer": "^1.2.0",
"react-countdown-circle-timer": "^2.3.7",
"react-cropper": "^2.1.3",
"react-csv": "^2.0.3",
"react-date-range": "^1.1.3",
"react-datepicker": "^4.2.1",
"react-dates": "^21.8.0",
"react-dom": "^17.0.2",
"react-dropzone": "^11.0.3",
"react-easy-crop": "^3.3.0",
"react-geocode": "^0.2.2",
"react-google-autocomplete": "^2.4.3",
"react-google-maps": "^9.4.5",
"react-hook-form": "^6.15.8",
"react-image-crop": "^9.0.4",
"react-images-uploading": "^3.0.0",
"react-infinite-scroll-component": "^6.1.0",
"react-infinite-scroll-hook": "^4.0.1",
"react-input-mask": "^2.0.4",
"react-loading-overlay": "^1.0.1",
"react-otp-input": "^2.3.0",
"react-phone-input-2": "^2.14.0",
"react-phone-number-input": "^3.1.35",
"react-qrbtf": "^1.2.1",
"react-qrcode-logo": "^2.2.1",
"react-redux": "^7.2.0",
"react-responsive-carousel": "^3.2.18",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-sortable-tree": "^2.8.0",
"react-sortable-tree-theme-minimal": "0.0.14",
"react-sound": "^1.2.0",
"react-step-wizard": "^5.3.5",
"react-stepper-horizontal": "^1.0.11",
"react-time-picker": "^4.4.3",
"react-to-print": "^2.10.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"sentry-files": "^1.0.1",
"serve": "^12.0.1",
"socket.io-client": "^4.3.2",
"styled-components": "^5.3.3",
"superagent": "^6.1.0",
"superagent-use": "^0.1.0",
"sweetalert": "^2.1.2",
"uuid": "^8.3.1",
"webpack": "^4.44.2",
"webpack-dev-server": "^3.11.1",
"write": "^2.0.0"
},
SVG 文件：
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6h-2c0-2.76-2.24-5-5-5S7 3.24 7 6H5c-1.1 0-1.99.9-1.99 2L3 20c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-7-3c1.66 0 3 1.34 3 3H9c0-1.66 1.34-3 3-3zm0 10c-2.76 0-5-2.24-5-5h2c0 1.66 1.34 3 3 3s3-1.34 3-3h2c0 2.76-2.24 5-5 5z"/></svg>
我没有完全理解这个问题，
请描述我做错了什么以及如何解决这个错误？
如评论中所述，您应该更新您的 webpack 配置以处理加载 svg 文件。在 module.rules 数组中，您应该添加以下内容：
{
test: /\.(png|svg)$/,
use: ['file-loader']
}
如果您愿意，可以随意更换装载机
我在更新包 JSON 文件中的包后收到此错误。
./src/assets/img/pickUp.svg (./node_modules/@svgr/webpack/lib?-svgo,+titleProp,+ref!./src/assets/img/pickUp.svg)
TypeError: Cannot read property 'tagName' of null
我只是像这样导入 svg 文件： 在更新软件包之前，我已经检查过补丁是否正确并且可以正常工作。
import { ReactComponent as Moped } from '../../assets/img/moped.svg';
这是包 JSON 文件：
"dependencies": {
"@atlaskit/css-reset": "^6.0.5",
"@elastic/charts": "^38.0.1",
"@elastic/datemath": "^5.0.3",
"@elastic/eui": "^40.0.0",
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-brands-svg-icons": "^5.15.2",
"@fortawesome/free-regular-svg-icons": "^5.15.2",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/react-fontawesome": "^0.1.16",
"@sentry/browser": "^6.13.3",
"@sentry/react": "^6.13.3",
"@sentry/tracing": "^6.13.3",
"@synapsestudios/react-drop-n-crop": "^0.2.0",
"axios": "^0.23.0",
"babel-jest": "^26.6.0",
"babel-loader": "^8.1.0",
"base64-img": "^1.0.4",
"canvg": "^3.0.7",
"cra-append-sw": "^2.7.0",
"date-fns": "^2.14.0",
"electron-firebase": "^1.2.0",
"electron-is-dev": "^2.0.0",
"electron-log": "^4.4.1",
"electron-pos-printer": "^1.2.4",
"electron-print": "^1.0.2",
"electron-push-receiver": "^2.1.3",
"emoji-mart": "^3.0.0",
"eslint": "^7.11.0",
"firebase": "^7.24.0",
"font-awesome": "^4.7.0",
"g": "^2.0.1",
"google-map-react": "^2.1.9",
"i": "^0.3.6",
"image-to-base64": "^2.1.1",
"jest": "^26.6.0",
"little-state-machine": "^4.1.2",
"lodash": "^4.17.20",
"moment": "^2.27.0",
"moment-timezone": "^0.5.31",
"node-sass": "^6.0.1",
"npm": "^8.1.0",
"pretty-time": "^1.1.0",
"raven-js": "^3.27.2",
"rc-time-picker": "^3.7.3",
"react": "^17.0.2",
"react-beautiful-dnd": "^13.0.0",
"react-big-calendar": "^0.38.0",
"react-compound-timer": "^1.2.0",
"react-countdown-circle-timer": "^2.3.7",
"react-cropper": "^2.1.3",
"react-csv": "^2.0.3",
"react-date-range": "^1.1.3",
"react-datepicker": "^4.2.1",
"react-dates": "^21.8.0",
"react-dom": "^17.0.2",
"react-dropzone": "^11.0.3",
"react-easy-crop": "^3.3.0",
"react-geocode": "^0.2.2",
"react-google-autocomplete": "^2.4.3",
"react-google-maps": "^9.4.5",
"react-hook-form": "^6.15.8",
"react-image-crop": "^9.0.4",
"react-images-uploading": "^3.0.0",
"react-infinite-scroll-component": "^6.1.0",
"react-infinite-scroll-hook": "^4.0.1",
"react-input-mask": "^2.0.4",
"react-loading-overlay": "^1.0.1",
"react-otp-input": "^2.3.0",
"react-phone-input-2": "^2.14.0",
"react-phone-number-input": "^3.1.35",
"react-qrbtf": "^1.2.1",
"react-qrcode-logo": "^2.2.1",
"react-redux": "^7.2.0",
"react-responsive-carousel": "^3.2.18",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-sortable-tree": "^2.8.0",
"react-sortable-tree-theme-minimal": "0.0.14",
"react-sound": "^1.2.0",
"react-step-wizard": "^5.3.5",
"react-stepper-horizontal": "^1.0.11",
"react-time-picker": "^4.4.3",
"react-to-print": "^2.10.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"sentry-files": "^1.0.1",
"serve": "^12.0.1",
"socket.io-client": "^4.3.2",
"styled-components": "^5.3.3",
"superagent": "^6.1.0",
"superagent-use": "^0.1.0",
"sweetalert": "^2.1.2",
"uuid": "^8.3.1",
"webpack": "^4.44.2",
"webpack-dev-server": "^3.11.1",
"write": "^2.0.0"
},
SVG 文件：
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6h-2c0-2.76-2.24-5-5-5S7 3.24 7 6H5c-1.1 0-1.99.9-1.99 2L3 20c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-7-3c1.66 0 3 1.34 3 3H9c0-1.66 1.34-3 3-3zm0 10c-2.76 0-5-2.24-5-5h2c0 1.66 1.34 3 3 3s3-1.34 3-3h2c0 2.76-2.24 5-5 5z"/></svg>
我没有完全理解这个问题，
请描述我做错了什么以及如何解决这个错误？
如评论中所述，您应该更新您的 webpack 配置以处理加载 svg 文件。在 module.rules 数组中，您应该添加以下内容：
{
test: /\.(png|svg)$/,
use: ['file-loader']
}
如果您愿意，可以随意更换装载机