Material-ui: SSR markup checksums not matching in client

[RavenHursT]

I'm using MaterialUI w/ React 16 w/ server-side rendering. Everything seems to be working, but React is complaining about the server-side and client-side markups not matching. Warning goes away if I remove the TextField from my view. What am I doing wrong?

React Warning: Warning: Prop 'htmlFor' did not match. Server: "email-undefined-Email-51592" Client: "email-undefined-Email-58019"

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Should be able to utilize MUI's TextField component w/ SSR w/o having React warn on SSR and CSR render mismatches.

Current Behavior

The warning above is displayed in the browser console.

Steps to Reproduce (for bugs)

This is a server-side render issue, so using something like codesandbox.com isn't an option since you can only do CSR in that case.

1. Create a SSR react app
2. Create a view w/ a TextField component in it like follows:

<TextField
              className=""
              type="email"
              fullWidth={true}
              name="email"
              floatingLabelText="Email"
            />

1. Load the view.
2. Check console to see React warning above.

Context

Just building an app using MUI and can't make the warning go away (which is also causing components to re-render in the client)

Your Environment

Node 8, KoaJS v2, React 16, react-router v4, Chrome latest

| Tech | Version |
|--------------|---------|
| Material-UI | 0.19.4 |
| React | 16 |
| browser | Chrome latest |
| etc | OSX High Sierra |

[RavenHursT]

Looks like this is where the problem lies. The uniqueId is using a Math.random in it's generation, so of course they'd be different from server to client:

Problem is.. the code in my version of TextField.js looks TOTALLY different than what I'm seeing in the current Beta branch:

https://github.com/callemall/material-ui/blob/v1-beta/src/TextField/TextField.js#L153

Was there a major refactor to make TextField into a functional component or something? I don't see uniqueId anywhere in that file in the repo now..

[RavenHursT]

Yup.. adding an id attribute to the TextField makes the warning go away.

Looks like, this won't be a problem in 1.0? So for anyone searching for why the current npm version is throwing this warning, it's because of the uniqueId being generated by Math.floor(). Looks like this won't be a problem once 1.0 is released.

Gonna close this.