IE11 + NextJS causes "Prop d did not match. Server:" error

[chrispytoes]

Describe the bug
I am using react-fontawesome with NextJS, and only in IE11 I'm getting the following error:

Warning: Prop `d` did not match. Server: "M 493.4 24.6 l -104 -24 c -11.3 -2.6 -22.9 3.3 -27.5 13.9 l -48 112 c -4.2 9.8 -1.4 21.3 6.9 28 l 60.6 49.6 c -36 76.7 -98.9 140.5 -177.2 177.2 l -49.6 -60.6 c -6.8 -8.3 -18.2 -11.1 -28 -6.9 l -112 48 C 3.9 366.5 -2 378.1 0.6 389.4 l 24 104 C 27.1 504.2 36.7 512 48 512 c 256.1 0 464 -207.5 464 -464 c 0 -11.2 -7.7 -20.9 -18.6 -23.4 Z" Client: "M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"
    at path
    at svg
    at FontAwesomeIcon (http://localhost:3000/_next/static/chunks/src_components_Layout_Footer_tsx.js?ts=1626712268388:403:3)
    at a
    at Link (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1626712268388:2120:5)
    at _c (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1626712268388:7208:3)
    at div
    a

I understand that the Prop d did not match error is due to a discrepancy between server and client-side state. Reading that SVG path I can see that the server-side one has extra spaces, whereas the client-side one gets minified when viewed in IE for some reason.

This only happens in IE. Chrome and Firefox work without issues. The error prevents the entire page from running and just shows a blank screen.

Reproducible test case
This is a private repo, and CodeSandbox does not work in IE so it wouldn't be viewable anyway.

Desktop (please complete the following information):

• IE11

[rshaul]

I am also seeing the same thing

Seems to be a react issue:
facebook/react#15187

[robmadole]

Yeah, we can't do anything about this one.

[salmidiv]

@robmadole @rshaul @ravinggenius
in next: 13.4.13
you can fix it like that
if you need to import themeswitcher in the header component, don't do it like this
import ThemeSwitcher from './theme-switcher'

insteed, call the component like this
const ThemeSwitcher = dynamic(() => import('./theme-switcher'))

and next add it like this

return ( <header> <ThemeSwitcher /> </header> )

[IsakFriisJespersen2]

@salmidiv your a legend!

[MahmoudDev1]

Hey, i'm now having this problem in google chrome but if i opened an icognito tab it works fine, although i removed all of my extensions
it happened in my icons from react-icons library
how can i fix it ?