Rendering a component on the server requires DOM (document)

[wereHamster]

I have the following stack trace when I try to render one of my pages on the server:

ERROR in ReferenceError: document is not defined
    at createNode (static:3586:163)
    at idiff (static:3627:26)
    at diff (static:3602:20)
    at renderComponent (static:3771:33)
    at renderComponent (static:3762:26)
    at cl.extend.forceUpdate (static:3917:14)
    at static:55402:16
    at Object.sig.subscribe (static:55288:10)
    at cl.React.createClass.componentWillMount (static:55401:21)
    at Object.renderToString (static:4546:34)

Somehow a code path is taken which causes a crash due to non-existing document in the global scope. I tried to follow the code in renderComponent but didn't get far.

[developit]

Interesting! I think I know why this is happening. Good catch.

[wereHamster]

Is it easy to fix? Or do you at least know what change would be required?

[developit]

Yeah - I think preact-render-to-string just needs to set component._disable = true when it instantiates a component. Should be pretty quick.

[wereHamster]

And why am I the first one to discover this issue? Am I the first one to actually try to use preact-render-to-string on the server?

[developit]

Definitely not. The issue is caused by setState being invoked from constructor, componentWillMount or render. Generally you'd want to do that from componentDidMount so it doesn't run during SSR.

[wereHamster]

The code in question is not directly under my control, it comes from a dependency. But if the code works in React, I'd expect it to work in preact as well.

[developit]

Indeed, it appears to be redux.

[sirgallifrey]

Hello, I'm trying to resolve this issue, and I wrote some test on preact-render-to-string, but all my tests are passing. Am I missing something or doing something wrong? Or maybe this issue has already been fixed?

it('Should render despite wrong use of setState on constructor, componentWillMount or render', () => {
	class TestConstructor extends Component {
		constructor() {
			super();
			this.setState({ banana: 'banana' });
		}
		render(props, state) {
			return <div class="testConstructor">{state.banana}</div>;
		}
	}

	expect(() => { render(<TestConstructor/>); }).to.not.throw();
	expect(render(<TestConstructor/>)).to.equal('<div class="testConstructor">banana</div>');

	class TestCmpWillMount extends Component {
		componentWillMount() {
			this.setState({ banana: 'banana' });
		}
		render(props, state) {
			return <div class="testCmpWillMount">{state.banana}</div>;
		}
	}

	expect(() => { render(<TestCmpWillMount />); }).to.not.throw();
	expect(render(<TestCmpWillMount />)).to.equal('<div class="testCmpWillMount">banana</div>');

	class TestRender extends Component {
		render(props, state) {
			this.setState({ banana: 'banana' });
			return <div class="testRender">{state.banana}</div>;
		}
	}

	expect(() => { render(<TestRender />); }).to.not.throw();
	expect(render(<TestRender />)).to.equal('<div class="testRender">banana</div>');
});

[developit]

@sirgallifrey We should add those tests! Thanks for writing them. I think in order to trigger the issue described here, you'd have to either call setState() twice, or in response to something asynchronous like a Promise. That will trigger a non-synchronous setState(), which won't get folded into the initial render, and currently will throw an exception.

class TestCmpWillMount extends Component {
	componentWillMount() {
		Promise.resolve().then( () => {
			this.setState({ banana: 'banana' });
		});
	}
	render(props, state) {
		return <div class="testCmpWillMount">{state.banana}</div>;
	}
}

[sirgallifrey]

I wasn't able to reproduce the error :(
I tried the promise example, I tried setTimeout, I tried setting a ref to setState and calling it after the render, I tried calling forceUpdate on promise, on setTimeout and none of those are throwing errors, at least not on my setup.
I could just apply the correction @developit suggested but as I'm in love with TDD I can't fix what I can't reproduce.

It's worth mentioning that I made these tests on

• preact-render-to-string 3.6.0
• preact 7.2.0

it would be helpful to know what versions are you using, @wereHamster
including preact-compat and react-redux if you are using those.

[wereHamster]

The error can be reproduced by this code. You need a double-nested component for the bug to be triggered. This is why you couldn't reproduce it, because you always returned a DOM element in your render functions.

const React = require('preact-compat');
const {renderToString} = require('preact-compat/server');

const Bar = () => React.createElement('div');

class Foo extends React.Component {
  componentWillMount() {
    this.forceUpdate();
  }
  render() {
    return React.createElement(Bar);
  }
}

renderToString(React.createElement(Foo))

{
  "dependencies": {
    "preact": "^8.1.0",
    "preact-compat": "^3.15.0"
  }
}

[developit]

Awesome, adding a test and fix in preact-render-to-string 3.6.1. It's a patch update to a dependency of preact-compat, so if you just run npm update you'll get the new version :)