Server Side rendering problem with NextJS and mask prop

[pioz]

When I add this line of code in my React component using NextJS v12.0.10

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faGithub } from '@fortawesome/free-brands-svg-icons'
import { faCircle } from '@fortawesome/free-solid-svg-icons'

<FontAwesomeIcon fixedWidth icon={faGithub} mask={faCircle} size="2x" transform="shrink-6" />

in Chrome console I get this warning:

Warning: Prop `id` did not match. Server: "clip-czH9E63zpnkZ" Client: "clip-p0bNRCYkXdjo"
    at clipPath
    at defs
    at svg
    at FontAwesomeIcon (webpack-internal:///./node_modules/@fortawesome/react-fontawesome/index.es.js:336:27)
    at a
    at div
    at Social
    at div
    at div
    at div
    at div
    at Layout (webpack-internal:///./components/Layout.jsx:20:26)
    at Home
    at MyApp (webpack-internal:///./pages/_app.js:38:27)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20584)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23125)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:359:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:793:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:915:27) 

If I remove the mask prop I get no warnings. I know this is only a warning, but is there a way to avoid it?

[shehi]

Prop X didn't not match error is prevalent in NextJs - but yea, FontAwesome should make sure they are not causing it.

As a workaround, importing the component dynamically might solve your problem.

[tagliala]

@robmadole could you please take a look?

[robmadole]

Hey @pioz I think we've got a fix for this. I'll try to get a release out for react-fontawesome as soon as I can.

[robmadole]

@pioz I released 0.1.18 which includes the ability to set maskId. Can you give this a try?

[pioz]

@robmadole I've tried

<FontAwesomeIcon fixedWidth icon={faGithub} mask={faCircle} maskId="github" size="2x" transform="shrink-6" />

but doesn't work. I don't know if this is the correct way to use the new maskId prop.

[robmadole]

@pioz I think we'll need a reproducible test case at this point. Can you provide that?

[pioz]

Ok, can you share a link on Codepen where I can use the <FontAwesomeIcon/> component? I don't know how to do it 🥺.

[robmadole]

@pioz you can use anything you like. A GitHub repo, a downloadable .zip. It doesn't have to be a codepen.

[pioz]

Ok, I've re-updated fontawesome, and the react warning has gone. Sorry, last time I thought I was using the latest version, it wasn't.