Server side render issues

[oyeanuj]

Hi @alsoscotland! Firstly, thanks for the plugin and the annotated source list (I'd love to see more plugins do that)!

I ran into the following React warning when inserting two ReactSuperSelect components in a single component:

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) 2.1.0"><div id="rss_1" class="r-ss-wrap"
 (server) 2.1.0"><div id="rss_3" class="r-ss-wrap"

Server-side React render was discarded. Make sure that your initial render does not contain any client-side code.

Have you seen this before? Or any pointers in solving this problem?

[alsoscotland]

@oyeanuj Thanks! Glad you like the component. The annotated source is easy to do with https://github.com/jashkenas/docco by @jashkenas by the way. It is a great tool

I have not run into the issue you are having with client-side rendering. Can you give me some info about your setup. Do you use webpack? How are you rendering server-side?

[alsoscotland]

@oyeanuj I did see another component with a similar issue when a user was using both redux and webpack.
The recommendation there was to try setting DEVTOOLS: false in webpack/dev.config.js Not sure if that applies here but it seems simple enough to try...

[oyeanuj]

Thanks for the quick response! Ideally, I would not want to disable DevTools while using the select plugin.

My setup is Redux &Webpack, entirely the setup described here: https://github.com/erikras/react-redux-universal-hot-example. Let me know if I can provide more details.

[oyeanuj]

@alsoscotland FWIW, once I disable SSR, the error goes away. Maybe that was implied, but I thought I'll mention it anyway.

Disabling DEVTOOLS does not help though :/

[oyeanuj]

You might already know this but I wonder if the discussion in this link helps debug at all: https://github.com/erikras/react-redux-universal-hot-example/issues/769

[alsoscotland]

@oyeanuj, I have been looking into this a bit. The problem seems to be due to the creation of a unique id in getInitialState. (This is done for aria usage/accessibility compliance)

I have read a few threads and have not run across any solution I find to be ideal. The simplest thing would be to require that the unique id for the control be passed as a prop but I am not thrilled about that.

Any chance you could make those ids deterministic in your local copy and see if the error does, in fact, go away?

[alsoscotland]

@oyeanuj any news on this? Were you able to try removing the lodash uniqueId calls to see if that was the problem?

[oyeanuj]

@alsoscotland Sorry for being MIA but I am back now on the project. Just to make sure I understand, are you suggesting that I pass in a fixed id like the code below:

<ReactSuperSelect
    id = "re-su-se-01"
    placeholder = "Change Source"
    dataSource = {sourceList}
    onChange = {this.sourceChanged}
    initialValue = {sourceList[0]}
    clearable = {false}
    groupBy = "group"
/>

That didn't work - let me know if that is what you were suggesting.

Also, were you able to reproduce the issue?

[alsoscotland]

@oyeanuj Thanks for getting back I do not have an app setup using redux and have not had time to put together an app for testing isomorphic rendering. I did read up that many of the problems are due to functions that create ids being run in a different context b/t server and browser. The line you would need to hard-code to test is https://github.com/alsoscotland/react-super-select/blob/14ac84fc66f3126ca7979ae6120469a25a250438/src/react-super-select.js#L196

remove the _.uniqueId and update to something that would stay consistent after the render and page load

[alsoscotland]

@oyeanuj any word on trying this?

[oyeanuj]

@alsoscotland Can't believe I never responded here, sorry about that! Now that I am back to working on that project, I have some good news!

Hardcoding controlId fixes the issue. Any thoughts on how to proceed further?

[alsoscotland]

@oyeanuj I had not looked into this further since we last were discussing the issue. Glad to hear that hard-coding works as a temp fix.

[oyeanuj]

I think #85 fixes the issue without making it a breaking change. Let me know if that works?