javascript - 为什么我在 SVG 上无法读取 null 的属性 'tagName'？

Question

在我的包 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>

我不完全理解问题，
请描述我做错了什么以及解决此错误的方法是什么？

Answer 1

正如评论中所讨论的，您应该更新您的 webpack 配置以处理加载 svg 文件。内module.rules数组你应该添加以下内容:

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

如果您愿意，可以随意更换装载机