Open redbaron76 opened 2 years ago
I'm getting a very similar error:
Warning: Prop 'id' did not match. Server: "svg-inline--fa-title-yASNLozqHYmH" Client: "svg-inline--fa-title-dcqRQi73aEeT"
This only happens when i pass a title
prop that's not falsy though 🤔 (maybe related to default props since that one is empty string i.e. the only falsy value that's allowed?)
The id
prop doesn't seem to cause this issue. Very odd.
@redbaron76 @FunctionDJ have you tried specifying titleId
? I don't think we have this documented but the component should support that now with 0.1.18.
@robmadole i'm using neither ids nor titleIds :V
@FunctionDJ ah, sorry we've got two different bugs here. Will you create an issue with your error separate from this? Your issues is not related to the OP. I think I have a fix for your issue once you do that.
@redbaron76 it's the extra space that is causing a problem for you. We'll see if we can get that taken care of.
I have the same warning about the pulse
prop:
Prop `className` did not match.
Server: "svg-inline--fa fa-spinner fa-pulse "
Client: "svg-inline--fa fa-spinner "
With spin
working fine in the same setup:
<FontAwesomeIcon
...
pulse={pulse}
spin={spin}
...
/>
It might be related to the unfinished internal migration from pulse
to spinPulse
but I'm not sure.
Should I create a new issue?
In Next.js there's a mismatch between the classes printed in
className
on the Server and the ones in Client.The Client adds a space at the end of the concatenation of classes, causing the mismatch.
In example:
Warning: Prop className did not match. Server: "svg-inline--fa fa-mug-saucer" Client: "svg-inline--fa fa-mug-saucer "