TextField SSR: Warning: Prop id did not match.

[inomn]

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

<AppProvider>
    <Page title="Log in">
         <Card sectioned>
          <Form onSubmit={this.handleSubmit}>
            <FormLayout>
              <div className={s.row}>
                <TextField
                  placeholder="Enter your E-mail"
                  type="email"
                  name="email"
                  label="Email"
                  autoComplete={false}
                />
              </div>
              <div className={s.row}>
                <TextField
                  placeholder="Enter your password"
                  type="password"
                  name="password"
                  label="Password"
                  autoComplete={false}
                />
              </div>
              <div className={s.button}>
                <Button submit>Login</Button>
              </div>
            </FormLayout>
          </Form>
         </Card>
     </Page>
</AppProvider>

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

[ghost]

👋 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>;
}

[ghost]

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

[ghost]

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.

[ghost]

Having the same issue with ResourceList items. Looks like the issue is being addressed here: #1761