Polaris-react: TextField SSR: Warning: Prop `id` did not match.

[inomn]

Looks like TextField SSR doesn't work properly.
There is minimalistic layout:

```

placeholder="Enter your E-mail"
type="email"
name="email"
label="Email"
autoComplete={false}
/>

placeholder="Enter your password"
type="password"
name="password"
label="Password"
autoComplete={false}
/>

Login

````

I'm getting error:

Warning: Prop id did not match. Server: "TextField15Label" Client: "TextField1Label"

If i remove label props, then error is about TextField id.
If i remove TextField at all, there is no errors (so Card, Button works fine).

Expected behavior

SSR works fine

Actual behavior

Warning: Prop id did not match.

Steps to reproduce the problem

1. You can use SSR-boilerplate from kriasoft: https://github.com/kriasoft/react-starter-kit
2. Make simple layout as shown above
3. Watch to browsers console

Specifications

• Are you using the React components? (Y/N): Yes
• Polaris version number: tried 3.7.1 and 3.2.1
• Browser: Google Chrome latest (mac)
• Device: Macbook
• Operating System: Mojave 10.14.3

[probot-shopify[bot]]

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. You can also join #polaris on the Shopify Partners Slack.

[CommerceOwl]

I'm also seeing this.

[Tzelon]

Me too

[EdvinasKilbauskas]

Same here

[gdayton]

Seeing the same issue as well

[gdayton]

I believe the problem has to do with the fact that the React app is being server side rendered. Inserting hooks to check and see if the componentDidMount/componentDidUpdate before displaying elements worked for me. Hope this helps!

import { useState, useEffect } from 'react';
const FooBar = () => {
  const [rendered, setRendered] = useState(false);
  useEffect(() => {
    setRendered(true),
    () => { setRendered(false); }
  });

  if(rendered)
    return (
      <div></div>
    );
  else 
    return <p>Loading...</p>;
}

[probot-shopify[bot]]

This issue has been inactive for 180 days and labeled with Icebox. It will be closed in 7 days if there is no further activity.

[BPScott]

Reopening this as SSR discrepancies are still an issue

[BPScott]

Probot. No

[probot-shopify[bot]]

This issue has been inactive for 180 days and labeled with Icebox. It will be closed in 7 days if there is no further activity.