IE11 & Edge SSR - Warning: Prop d did not match. Server: “M 0 0 h 24 v 24 H 0 Z” Client: “M0 0h24v24H0z”

[williamsdyyz]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

ReactDOM.hydrate should not generate any warnings

Current Behavior 😯

On Edge and IE11 only, hydrate warns with:
Warning: Prop d did not match. Server: “M 0 0 h 24 v 24 H 0 Z” Client: “M0 0h24v24H0z”
All other browsers seem to be OK
Hitting the server with CURL shows that the server data is correct.

Steps to Reproduce 🕹

I took the SSR example from material-ui-master/examples/ssr
Added a single SVG icon from @material-ui/icons
Removed code a piece at a time to try to isolate the issue. What's left is the absolute minimum required and the problem still exists.
The project is attached as ssr.zip

ssr.zip

Context 🔦

Working on a project that requres SSR as well as IE11 & Edge support. The MS browsers were happy until I started using @material-ui/icons

Your Environment 🌎

I'm developing on Windows 10 1809
Node v8.9.1

"@babel/core": "latest",
"@babel/node": "latest",
"@babel/plugin-proposal-class-properties": "latest",
"@babel/preset-env": "^7.4.2",
"@babel/preset-react": "latest",
"@material-ui/core": "latest",
"@material-ui/icons": "^3.0.2",
"babel-loader": "next",
"express": "latest",
"fs": "0.0.1-security",
"net": "^1.0.2",
"nodemon": "latest",
"prop-types": "latest",
"react": "latest",
"react-dom": "latest",
"react-jss": "^8.1.0",
"webpack": "latest",
"webpack-cli": "latest"

[oliviertassinari]

@williamsdyyz Do you think that you could reproduce the issue on Codesandbox? https://codesandbox.io/s/18m522pm14 I can't so far.

[williamsdyyz]

@oliviertassinari you've created a server-side rendering but it's not the server that is at fault. I verified that the server is sending the correct data - curl localhost:3000 returns
...<svg class="MuiSvgIcon-root-58" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"><path fill="none" d="M0 0h24v24H0z"></path><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg>...

The Hydrate on the client side is logging a warning to the console, but only on IE11 & Edge.

I tried setting up an example in codesandbox with no luck.

The zip file I uploaded demonstrates the problem well and with a minimal amount of code however.

[oliviertassinari]

We can open an issue on React side: facebook/react#15187.

[williamsdyyz]

@oliviertassinari You reproduced with Next? Thank you.

And thanks for Material-ui - I am a fan 👍