Bug: NextJS and svg-core cause server and client hydration errors

[tm1000]

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

• Chrome 105 on MacOS 12.6
• Firefox 105 on MacOS 12.6

Web bug report checklist

• I have included a test case because my odds go way up that the team can fix this when I do
• I have searched for existing issues and to the best of my knowledge this is not a duplicate

[johndalvik]

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');

[tagliala]

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

[Vincz]

Same problem here. The require fix worked for me.

[tagliala]

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

[tagliala]

@robmadole could you please take a look or reassign to the most suitable person?

[robmadole]

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" />
  </>;
}

[tm1000]

@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

[robmadole]

@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.

[knightjdr]

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.

[Isaac-Tait]

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)

[Jkdrumm]

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.

[timmeade]

Agreed same issue. Next 13.03. require fixed but seems hacky

[josephmasongsong]

Also experienced the same issue using Next 13 and FA 6.2.0. Require seems to do the trick although not ideal.

[dan2kx]

Any update on this?

[TravisHi]

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.

[mengdu]

Nuxt.js 3 got the same issue

Got error:

Could not find one or more icon(s) { prefix: 'fas', iconName: 'user-secret' } {}

[benmarch]

Using NextJS 13.4.8 and FontAwesome 6.4.2 and the "require" workaround is not working for me. Any other ideas?

[dan2kx]

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" />
  </>;
}

[benmarch]

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...

[madipta]

any update?

[irontitan76]

Facing this same issue—also using the App Router from Next.js.

[dimitrovivan]

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}  />

[asjadanis]

Any fix for this with Next 14?

[YKDZ]

Facing the same issue when using vike + Vue:

chunk-3EHLT4K4.js?v=0e8bb5f8:2144 [Vue warn]: Hydration node mismatch:
- rendered on server: 
  
- expected on client: svg 
  at <FontAwesomeIcon key=1 icon= 
Array(2)
 > 
  at <RegisterForm> 
  at <+Page> 
  at <Content> 
  at <LayoutDefault> 
  at <RootComponent>

Currently solved by importing icons directly:
import { faEnvelope, faEye, faEyeSlash, faKey, faUser } from '@fortawesome/free-solid-svg-icons'

[GavGrayston]

Title attribute causing problems.

I didn't have a problem in Next 14 with the App Router, but am getting it now upgraded to Next 15.... though not with all icons. (And using the React Fontawesome icons).
What appears to be happening is the random ID is being generated differently when pre-built on the server and then hydrated on the client.

And the code is really simple.

However, after commenting out the title attribute there are no more hydration issues!