Server-side rendering

[luandro]

I've seen there was a recent pull #150, but does the npm version of Belle fix these problems yet? I'm eager to use it, but since my application is all rendered on the server I get errors like these for most of the components:

ReferenceError: document is not defined

[jpuri]

Hey,
Release should be very soon today or tomorrow by latest, @nikgraf can confirm.

[luandro]

That would be awesome! Thanks @jpuri

[nikgraf]

Hey @luandro, we just published version 1.1.0 which should work seamlessly with server-side rendering. Can you give it a try and let us know how it works for you?

[luandro]

Thanks a lot for the update.
So far I'm using Toggle and Select components. Toggle seems to render fine, but Select discards my server-side render:

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) id="belle-select-id-1" data-reactid=".jh
 (server) id="belle-select-id-2" data-reactid=".jh

[jpuri]

Hey @luandro ,

We are looking into this.

[jpuri]

Hey @luandro ,

I tired using select in React-Server side project - https://github.com/nikgraf/react-server-example
and also in another isomorphic project.

What I found regarding select is that its rendering but has issue in event handling - that is coz we have referenced 'document' in some of event handlers ( :( our fault, we will fix that).

But I could not replicate the issue you are getting :(

[luandro]

It seems to be working perfectly now. Thank you very much for these beautiful components.

[jpuri]

happy to see ur liking these 😄

[yzhiJun]

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) id="belle-select-id-1" data-reactid=".jh
 (server) id="belle-select-id-2" data-reactid=".jh 

I also has issue when doing server-side rendering, just add the id property to the component will fixed that.

In server-side rendering, Everytime create the select component will cause belle-select-id-${uniqueId()} plus 1:

https://github.com/nikgraf/belle/blob/master/src/components/Select.js#L243

[jpuri]

Hey @yzhiJun,

Thanks a lot for this finding, we will soon fix this 👍

[nikgraf]

hey @yzhiJun, just release 2.0.3 with a fix for the issue, thx for letting us know 😄

[yzhiJun]

@jpuri @nikgraf

Wow, so quickly respond, I just upgrade to 2.0.3 and it works perfectly now 👍
Thank you for your great project.

[jpuri]

Great job @nikgraf 😄