React id mismatch with SSR font awesome mask

[flippidippi]

Describe the bug With Next.js/SRR, Getting errors like Prop id did not match. Server: "clip-EcZ4B045I3jF" Client: "clip-MBNTauDeff3J". when using mask.

Reproducible test case

• Pull https://github.com/flippidippi/ssr-font-awesome-issue
• Go into directory and run npm i then npm run dev
• Go to http://localhost:3000
• Open developer console and refresh the page
• Error should be shown
• Line causing issue https://github.com/flippidippi/ssr-font-awesome-issue/blob/main/pages/index.tsx#L10

Expected behavior The id should be the same on the server and client

Desktop (please complete the following information):

• Browser [e.g. chrome, safari]: Edge
• Version: 112.0.1722.34

Additional context N/A

[altearius]

I've also noticed this.

I believe I have tracked this down to the usage of nextUniqueId() function on line 1498 of @fortawesome/fontawesome-svg-core/index.js.

I suspect nextUniqueId() should be replaced by useId() for React 18+, though I am not sure how best to support lower React versions.