Got warning: "Did not expect server HTML to contain a <div> in <div>."

[geiszla]

When use the Card component and also SSR, React 16 gives the following message:

Did not expect server HTML to contain a <div> in <div>.

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

Expected Behavior

A Card component should render on the serve side, so the client side doesn't have to do anything with it and should return no warning.

Current Behavior

When I use the Card component with React 16 like this:

<Card className={classes.card}>
    <CardContent>
    <Typography type="headline" component="h2" >
          Login
    </Typography>
    <TextField
      id="username"
      label="Username"
      autoComplete="username"
      className={classes.input}
    />
    <TextField
      id="password"
      label="Password"
      type="password"
      autoComplete="current-password"
      margin="normal"
      className={classes.input}
    />
  </CardContent>
  <CardActions className={classes.cardActions}>
      <Button onClick={() => props.handleLogin()}>Login</Button>
  </CardActions>
</Card>

it gives the following error on hydration:

Warning: Did not expect server HTML to contain a <div> in <div>.

printWarning @ bundle.js:sourcemap:423
warning @ bundle.js:sourcemap:447
warnForDeletedHydratableElement$1 @ bundle.js:sourcemap:16895
didNotHydrateInstance @ bundle.js:sourcemap:17573
deleteHydratableInstance @ bundle.js:sourcemap:11892
popHydrationState @ bundle.js:sourcemap:12099
completeWork @ bundle.js:sourcemap:11067
completeUnitOfWork @ bundle.js:sourcemap:12568
performUnitOfWork @ bundle.js:sourcemap:12670
workLoop @ bundle.js:sourcemap:12724
callCallback @ bundle.js:sourcemap:2978
invokeGuardedCallbackDev @ bundle.js:sourcemap:3017
invokeGuardedCallback @ bundle.js:sourcemap:2874
renderRoot @ bundle.js:sourcemap:12802
performWorkOnRoot @ bundle.js:sourcemap:13450
performWork @ bundle.js:sourcemap:13403
requestWork @ bundle.js:sourcemap:13314
scheduleWorkImpl @ bundle.js:sourcemap:13168
scheduleWork @ bundle.js:sourcemap:13125
scheduleTopLevelUpdate @ bundle.js:sourcemap:13629
updateContainer @ bundle.js:sourcemap:13667
(anonymous) @ bundle.js:sourcemap:17658
unbatchedUpdates @ bundle.js:sourcemap:13538
renderSubtreeIntoContainer @ bundle.js:sourcemap:17657
hydrate @ bundle.js:sourcemap:17719
(anonymous) @ bundle.js:sourcemap:66465

The description of the warning does not say much, so I couldn't investigate further. However, when I change the above code to a simple <div> tag, the warning disappears, so I suspect that there is something wrong with the sever-side rendering of the Card component.

If there's a way to get more information about the warning I could look into it, I just have no idea how :).

Context

Your Environment

Tech	Version
Material-UI	1.0.0-beta.25
React	16.2.0
browser	Google Chrome 63.0.3239.108 (Official Build) (64-bit)

[oliviertassinari]

Your issue has been closed because it does not conform to our issue requirements.
Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

In your case, a codesandbox might not be enough. A repository would be perfect. However, I have some doubt about the issue description as we don't experience the issue on the documentation web site. I see two potential source of this issue.

1. you are using an invalid HTML DOM structure. For instance nesting a div inside a p is invalid and will lead to the issue describe.
2. you are suffering from Modal keepMounted causes mis-match in server-side rendering #9248, an issue I'm currently working on.