Can't reuse server markup because of required="" vs required rendering difference

[saponifi3d]

I am trying to upgrade from 0.14.8 to 15.0.1 in a Universal JS application, without any warnings on 0.14.8. I'm getting a few warnings, however I think this might be an issue with ReactDOM?

Reuse markup warning

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:

When I looked into this specific issue it was because on the server an input field with a required attribute rendered as required="" whereas on the client it's just required.

For a quick example of this issue:

// in node command line
> ReactDOM.renderToString(React.createElement('input', { required: true }));
'<input required="" data-reactroot="" data-reactid="1" data-react-checksum="573510284"/>'

// same simple input field rendered in the client via ReactDOM.render
var el = React.createElement('input', { required: true });
ReactDOM.render(el, document.getElementById('app'));
<input data-reactroot required>

[mmollaverdi]

Saw the exact same issue today after an upgrade to 15.0.1.

[zpao]

I'm fairly confident that the required vs required="" difference is a red herring. Unfortunately this has come up several times. These attributes are probably fine like this and there's a good chance the difference is actually later in the markup. The empty string vs bare attribute is typically a difference only in the DOM API's representation of the markup (I think we use outerHTML).

We've seen some similar issues in the v15 upgrade and there's more discussion in #6451. If you could show that this is happening explicitly with required={true} (eg, in a simplified example, not your application), then we should reopen. I couldn't make it happen with your example above (https://jsfiddle.net/16jtetL6/). So for now I'm going to close and encourage you to follow along in the other issue.