Khan/react-components

TimeoutTransitionGroup causes error during server-side rendering

Closed this issue · 3 comments

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.

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.

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.

Adding:

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

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