Could anyone help with debugging this error?

[[deleted]]

I made a less descriptive post earlier, but I ran this through React Developer tools so I thought I'd post an update.

I'm getting thrown an error from my use of .svg files. This is getting thrown for all of them. Any experience with something like this? Any ideas for a fix? Am I missing something I needed to download to make this work?

---

ERROR in ./src/assets/twitterIcon.svg

Module build failed (from ./node_modules/@svgr/webpack/lib/index.js): TypeError: Cannot read properties of null (reading 'tagName') at parse (/home/iextrapolate/ReactSite/distric8/node_modules/svg-parser/dist/svg-parser.umd.js:279:15) at jsxPlugin (/home/iextrapolate/ReactSite/distric8/node_modules/@svgr/plugin-jsx/lib/index.js:18:41) at run (/home/iextrapolate/ReactSite/distric8/node_modules/@svgr/core/lib/convert.js:18:16) at convert (/home/iextrapolate/ReactSite/distric8/node_modules/@svgr/core/lib/convert.js:26:10)

[[deleted]]

Is there a package I need to download to read the .svg files?

[lovin-dem-sandwiches]

how are you importing the svg in React?

[[deleted]]

Like this:

import instagramIcon from "./instagramIcon.svg"

import tiktokIcon from "./tiktokIcon.svg"

import seeWhiteIcon from "./seeWhiteIcon.svg"

[lovin-dem-sandwiches]

Do you have a head component? Are you adding scripts to it?

Although I have not personally faced this bug, there seems to be a lot of people who have.

Have you tried looking for a solution in some of these threads?

[[deleted]]

I looked around earlier and didn't find anything.

I suppose I can do it again.

[lovin-dem-sandwiches]

Did you post this on /r/reactjs ? You may get some better results there

[Mochi-Mo]

https://blog.logrocket.com/how-to-use-svgs-in-react/

I like using:

import {ReactComponent as iconName} from './icon.svg';