ReferenceError: document is not defined when rendering server side

[Larry Ruckman]

So I'm trying to prerender my react component server side and whenever I do so I receive this error.

document is not defined.

getDefaultProps: function () { return { dropEffect: "copy", frame: document, targetAlwaysVisible: false }; }

Has any thought been given as to how to make this component work when rendered server side? I thought it would be as easy as changing getDefaultProps so it doesn't reference document but that just pushes the error to propTypes and then to startFrameListeners and so on.

[Larry Ruckman]

OK I'm going to close this issue since I found a workaround. I'm conditionally including FileDrop in my react component. I do this in the render function by checking if window is defined. I believe this is how it should be handled. The result being I can pr-erender my stuff on the server and still run it on the client side as well.

Sample below (ES6):

....
render() {
    var fileDrop;
        
        if (typeof (window) !== 'undefined') {
            fileDrop = <FileDrop
                frame={window}
                onDrop={this.handleFileDrop}>
                <div className="inner">
                    <h4>Drop to index your files</h4>
                </div>
            </FileDrop>;
        }

    return <div>{fileDrop}</div>;
}
....