SSR support about react-image-lightbox HOT 8 CLOSED

A react-image-lightbox-universal repo has apparently been made (kind of wish they made a pull request).

So if you're in a hurry, that will get you up and running quickly, but it lacks many of the more recent improvements and fixes I've made. It will at least be a good reference for making this project SSR-compatible.

from react-image-lightbox.

An alternative until this is fixed is to wrap the Lightbox in a class (which is convenient for using it anyway) and only require it in the constructor instead of on top of the file. And only include this new module when the lightbox is open. That might cause performance to be a tiny bit less the first time your load it. But it will make server side rendering possible since the module is never loaded on the server (because no lightboxes are open without user interaction).

https://gist.github.com/tiemevanveen/96829e68f12fd6864ee5be72eaece03e

from react-image-lightbox.

@mikelambert i will look into the latest version and see if i can incorporate it to make it work in universal. and then will send pull request.

from react-image-lightbox.

Ah, I figured this issue was going to pop up eventually. I haven't had the chance to do SSR myself, so I'm not too familiar with the ins and outs of it, but if I had to guess, I'd say the issue originates from one of these parts:

1. Using style-loader with webpack to append styles to the page. I really like the idea of style-loader, because you don't have to deal with adding the style files yourself, and it still acts like normal css. However, it becomes a problem in cases like SSR and CSS class precedence, so I'm considering just separating the style files out into a single CSS file, as is being done in react-virtualized, which a lot of my build is based off of.
2. Accessing window directly in several places. Again, this is probably a symptom of not having worked with SSR before, but I use it to get the clientWidth and clientHeight, and also to attach mouseup handlers (so mouseup events falling outside the window still get caught).
3. Browser-specific rendering. I do some stuff like the getIEVersion() method you mentioned to make it compatible with IE 9 (which doesn't have 3D CSS transforms or flexbox).

If you could offer any advice/pull requests based on your experience, I would really appreciate it. For the time being, I guess I'll make external CSS files a v4.0 goal.

from react-image-lightbox.

I made the CSS issue at #28

from react-image-lightbox.

@abhirathore2006, any interest in upstreaming your universal changes back to this repo? You're 7 commits ahead with your changes, but 78 commits behind...

I tried to go do it myself (the this.state is very straightforward), but realized I don't understand this lightbox-webpack parts well enough to upstream them myself.

from react-image-lightbox.

@fritz-c i didn't made pull request because changes i made were huge, you can check the log here abhirathore2006@d1305fb

from react-image-lightbox.

Fixed by #54

from react-image-lightbox.