Khan / react-components

khan.github.io/react-components/
MIT License
1.01k stars 99 forks source link

TimeoutTransitionGroup causes error during server-side rendering #26

Closed tobice closed 9 years ago

tobice commented 9 years ago

The problem here is that TimeoutTransitionGroup tries to access document and window variables inside the detectEvents() function and that obviously fails when run on server.

I know that using this component doesn't really make sense on the server but this behavior makes it impossible to write fully isomorphic code. It would be nice if this component could provide some fallback way when run on the server.

joelburget commented 9 years ago

Hey @tobice, thanks for the report! We don't run any code on the server so I'm not familiar with the right way to do it. If you would like to send a pull request I'd be happy to merge it.

tobice commented 9 years ago

To be honest, I'm also not familiar with the right way to do it. At this point, I only need the TimeoutTransitionGroup to render itself as an empty container on the server. The items are added only on the client side. I use this workaround to prevent rendering from failing (inside the detectEvents() function):

    var style = {};
    if ('undefined' === typeof window) {
        var window = {};
    }
    if ('undefined' !== typeof document) {
        var testEl = document.createElement('div');
        style = testEl.style;
    }

In general, it should be possible to render some content inside this component already on the server (it should behave like a dumb wrapper doing nothing). But I don't need that and I also don't really know how this component works at this point so I'm reluctant to make any changes or suggestions. If I need it and manage to solve it, I'll publish my solution through a pull request.

sophiebits commented 9 years ago

Adding:

if (typeof window === "undefined") {
    return;
}

at the top of the detectEvents function would be reasonable and should fix it.