I'm using fontawesome for icons, but something went wrong somewhere and now, every time I type something the console shoots out a version of:

Could not find icon null

When I fist load/refresh the page I get 5:

I see where the errors are happening, but I'm not sure why. Is it a local host thing? I have inputs where I'm handling the change with (ev) and setting a state. On every keypress or handleChange I get new, weirder and longer errors like:

I'm not really sure what's causing them. Based on what I've seen in other questions posted, it's my fontawesome icons, but I don't see why or how since all the icons I'm using render fine. I'm using webpack, so maybe somethings happening there.

EDIT: It's for sure happening because of fontawesome, still not sure why. Ran a test with a different component and no error. Any component that has a fontawesome icon, throws errors on any change.

CodePudding user response：

The error was actually coming from these lines I had in two of my components:

import { icon } from "@fortawesome/fontawesome-svg-core";

Basically, I was adding all the icons I was planning on using to my library in my main App.jsx file, but forgot that I was trying to render another icon (one that wasn't added to the library) in one of my components:

DOWNLOAD{" "}
<FontAwesomeIcon icon={icon({ name: "download", style: "solid" })} />

This was the way I had imported and rendered icons before using the library and I guess one of my js files was throwing an error trying to import { icon } that didn't exits.