react-typeahead-component
react-typeahead-component copied to clipboard
ezequiel
Server Side Checksum error
@ezequiel There is a checksum error when rendering isomorphically. You are setting disabled: true on your input which React re-writes to disabled for an input.
Actually that might be a red-herring.. But there is probably a style being set or something else causing it to fail, only way to find out is to renderToString and do a diff.. using react 13. Are you setting anything at render?
Interesting... I wonder if this line is the problem: https://github.com/ezequiel/react-typeahead-component/blob/master/src/components/typeahead.jsx#L78
I would imagine new Date().getTime() producing different values on the client and server.
@jamesjjk Can you re-test by removing the above line and using some hardcoded id instead?
@ezequiel Hey, I rebuilt an iso app and modified typeahead - L78 to uniqueId = 'someHardCodedId'; and it no longer throws the error. Let me know when you roll out an update :+1:
Thanks!
@ezequiel A bit of another issue If you are planning to fix this I wondered if you mind adding on L182 name: props.inputName for those who are using your component in an isomorphic setup.
@jamesjjk Sure! One question though: is inputName for the name attribute on the input element? ex: <input name="abc" />?
@ezequiel Yep that's the idea - the reason I ask is if you wrap the item in a form you can use the input even when JS is disabled.. and simply submit the result. I forget to add the PropType..
@jamesjjk I've published a new version 0.8.0, which attempts to fix the unique id issue, and adds the inputName prop. Can you test it out and let me know how it checks out? :rocket:
@ezequiel I have tested your update which unfortunately presents a checksum mismatch issue again. However this time I have tried to set a static ID again - and it still fails.. Any ideas? - happy to test.
@ezequiel Same error as before, this is a red hearing though the fault will be somewhere else - when I updated the unique ID before this error was mitigated, however it looks like there have been subsequent commits to version 0.8:
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) 1.0"><input disabled role="presentation" (server) 1.0"><input disabled="" role="presentati
Apologies for not getting to this. Just started a new job and don't have much time. @jamesjjk Of course you can help! If you can come up with a solution, I'm more than happy to accept it. Can you provide me with an isolated reproduction case? I want to be able to run the project and see the error. This will help me greatly.