Next.js - className doesn't match from Server to Client

[redbaron76]

trafficstars

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 "

[FunctionDJ]

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.

[robmadole]

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

[FunctionDJ]

@robmadole i'm using neither ids nor titleIds :V

[robmadole]

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

[ivan-kleshnin]

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?