cannot read property name ; tagName null, while using svg-CodePudding

It's a duplicate question on SVG, but maybe my scenario is different, I am not able to understand any solution on the web for my problem which is, getting below error

ERROR in ./src/Utility/assets/customer-delight-logo.svg Module build failed (from ./node_modules/@svgr/webpack/lib/index.js): TypeError: Cannot read properties of null (reading 'tagName') at parse (C:\Customer delight\customerdelight\node_modules\svg-parser\dist\svg-parser.umd.js:279:15)......

my package.json contains

{
  "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"
  }
}

this is my code

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!

CodePudding user response：

someFile.svg

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
  <path d="M12 2h-1v20h1a10 10 0 0 0 0-20zm1 17.94V4.06a8 8 0 0 1 0 15.88z"></path>
</svg>

Current What you are doing is

import someFile from 'someFile.svg'

export default function Logo() {
  return <img src={someFile} alt="Logo" />
}

How webpack parse it and how browser will display it :

<img src="<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12 2h-1v20h1a10 10 0 0 0 0-20zm1 17.94V4.06a8 8 0 0 1 0 15.88z"></path></svg>" alt="Logo" />

which is invalid. What you can do instead is use a tool like svg2jsx which convert your svg code into a react component.

function Logo() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
      <path d="M12 2h-1v20h1a10 10 0 000-20zm1 17.94V4.06a8 8 0 010 15.88z"></path>
    </svg>
  );
}

export default Logo;

Now you can use this component anywhere.

import Logo from 'Logo.js'

CodePudding user response：

Try to update your webpack configuration to handle loading svg files. inside the module.rules array you should add the following:

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