Open tm1000 opened 1 year ago
I had the same error, and what I did is to change the import to require js, like this:
const { library, config } = require('@fortawesome/fontawesome-svg-core');
Sorry, I do not know NextJS. As far as I can tell, it is a framework based on React
If this is the case, then the react-fontawesome component component is required to make font awesome work
So I'm asking if there is there, by any chance, an answer to this issue on the react-fontawesome repository at https://github.com/FortAwesome/react-fontawesome/ or if this issue belongs to there
Same problem here. The require
fix worked for me.
Any chance to have a test case with the minimum amount of code and dependencies to reproduce this issue hosted on a publicly accessible GitHub repo?
edit: ok sorry it's in the first post
@robmadole could you please take a look or reassign to the most suitable person?
Ok. I think this is related to https://github.com/FortAwesome/react-fontawesome/issues/525. My guess is that the Library singleton is not working correctly with SSR.
We'd need to involve the Next.js folks in order to figure this out probably.
I'd recommend the workaround of avoiding the Library
altogether. Import the icon directly and use it like this:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars } from '@fortawesome/free-solid-svg-icons';
export default function Home() {
return <>
<FontAwesomeIcon icon={faBars} fixedWidth color="black" />
</>;
}
@robmadole yeah that's just a lot of work for an already existing codebase!
I'm going to try the require way a bit later and report back if it works
Thank you for your input! Much appreciated
@tm1000 yeah that require
hack realllly makes me suspicious of the SSR rendering pipeline. That screams isolation/sandboxing stuff where the Library singleton is not really working.
The latest version of NextJS (12.3.1
) and FontAwesome 6.1.2
does not cause this problem, but upgrading to 6.2.0
does. The require fix does resolve it for me as well.
I was having this same issue when upgrading to next 12.3.1
and font-awesome-{icons} >6.0.2
I was able to resolve by following @johndalvik suggestion, which for me was found at pages/_app.js
(change-log viewable here)
I'm still experiencing this issue in NextJS 13.0.0
and FontAwesome 6.2.0
. Using the require
workaround did fix the issue however.
Agreed same issue. Next 13.03. require fixed but seems hacky
Also experienced the same issue using Next 13 and FA 6.2.0. Require seems to do the trick although not ideal.
Any update on this?
I had the same error, and what I did is to change the import to require js, like this:
const { library, config } = require('@fortawesome/fontawesome-svg-core');
I had to use this solution to get it working.
Nuxt.js 3 got the same issue
Got error:
Could not find one or more icon(s) { prefix: 'fas', iconName: 'user-secret' } {}
Using NextJS 13.4.8 and FontAwesome 6.4.2 and the "require" workaround is not working for me. Any other ideas?
Using NextJS 13.4.8 and FontAwesome 6.4.2 and the "require" workaround is not working for me. Any other ideas?
try using the solution above from @robmadole, worked for me
Ok. I think this is related to FortAwesome/react-fontawesome#525. My guess is that the Library singleton is not working correctly with SSR.
We'd need to involve the Next.js folks in order to figure this out probably.
I'd recommend the workaround of avoiding the
Library
altogether. Import the icon directly and use it like this:import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faBars } from '@fortawesome/free-solid-svg-icons'; export default function Home() { return <> <FontAwesomeIcon icon={faBars} fixedWidth color="black" /> </>; }
Thanks @dan2kx, unfortunately that's how I have it configured.
I might have some complicating factors such as lazy loading components that could be affecting this. I was able to avoid the error by using next/dynamic
in some cases, but it still failed in other cases. It seems not to be an issue if i comment out all imports of Font Awesome though, so I'm fairly certain it's related. Maybe a race condition? Still working through it...
any update?
Facing this same issue—also using the App Router from Next.js.
You may try this approach if you have the topic issue or error: Could not find one or more icon(s) { prefix: 'fas', iconName: '....}
App.jsx
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
library.add(far, fas);
Icon.jsx
import { findIconDefinition } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
const faIconPrefix = {
regular: 'far',
solid: 'fas',
};
const Icon = ({ name, type = 'regular' }) => {
const iconLookup = { prefix: faIconPrefix[type], iconName: name };
const iconDefinition = findIconDefinition(iconLookup);
return (
<FontAwesomeIcon icon={iconDefinition} />
);
};
export default Icon;
Usage:
<Icon name="shopping-bag" />
**NOTE**
By this approach you will import all of the icons and they will be included in the initial bundle.
In my case i have CMS and i need them at app boot, but you may just simply need to import each icon separately and use it as follows :
import { faHouse } from '@fortawesome/free-solid-svg-icons';
<FontAwesomeIcon icon={faHouse} />
Any fix for this with Next 14?
Bug description
This is actually similar to #19193 and it might entirely be the same issue (or related). After following https://fontawesome.com/v6/docs/web/dig-deeper/svg-core and https://fontawesome.com/v6/docs/web/use-with/react/use-with I continue to get hydration errors since upgrading to react 18. I've narrowed this down to svg-core not working properly in SSR mode and I've attached a repo that is easy to download and install and demonstrates the error at hand.
Reproducible test case
https://github.com/tm1000/fontawesome-bug
Screenshots
Font Awesome version
v6.2.0
Serving
Self-hosted
Implementation
SVG+JS
Browser and Operating System
Web bug report checklist