search

jquense / react-widgets

Polished, feature rich, accessible form inputs built with React
http://jquense.github.io/react-widgets/
MIT License
2.34k stars 395 forks source link

DateTimePicker renders itself differently on client and on the server #233

Closed smashercosmo closed 8 years ago

smashercosmo commented 8 years ago

When I put DateTimePicker on my page, I get the following React error

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:
 (client) .mzt5cv35z4"><input aria-expanded="false
 (server) .mzt5cv35z4"><input id="rw_1_input" tabi

Here is a small demo repo. Clone it, run "npm install" and then "gulp".

akmoulai commented 8 years ago

Using v3.0.0-beta.1 (thanks for the nice work btw), I got the same warning, with the difference:

 (client) .0.0"><input id="rw_1_input" tabindex="0
 (server) .0.0"><input id="rw_3_input" tabindex="0

So close! ;)

jquense commented 8 years ago

@devnomad in your case the difference is due to a known react issue with generating id's, you should provide each widget an ID prop to avoid the issue

akmoulai commented 8 years ago

@jquense oops, I wasn't aware of this issue. Thanks for pointing this out.

smashercosmo commented 8 years ago

@jquense yep, different ids is only one problem. The other problem is different attributes order on client and on server. By the way, we faced this issue only in Chrome. Firefox and Safari place attributes in the same order.

jquense commented 8 years ago

@smashercosmo I am actually tempted to say that the attribute order issue is not RW related, we encountered a similar problem rendering the react-bootstrap docs, and others have said they have experienced the same (on different projects) after upgrading to react 0.14. Which leads me to believe that there is (at least in part) a react bug at play here.

smashercosmo commented 8 years ago

@jquense I wonder, why there is still no issue opened in React repo?)) We should make an example app and definitely inform react team about this problem.

jquense commented 8 years ago

@smashercosmo yeah I am not sure, in our case we haven't been able to isolate it and repo it enough to open a formal issue

smashercosmo commented 8 years ago

@jquense ok, I'll try to create minimal working example. Feel free to close this issue)