ReactDOMServer.renderToString: presence of onClick handler causes errors on async update

[denvned]

The code

class Comp extends React.Component {
  componentWillMount() {
    setTimeout(() => {
      this.setState({});
    });
  }

  render() {
    return <div onClick={() => {}} />;
  }
}

ReactDOMServer.renderToString(<Comp />);

produces errors:

Warning: React can't find the root component node for data-reactid value .0. If you're seeing this message, it probably means that you've loaded two copies of React on the page. At this time, only a single copy of React can be loaded at a time.

Uncaught TypeError: Cannot read property 'firstChild' of undefined

But if I remove onClick handler the errors go away...

See demo: http://codepen.io/dened/pen/YyByYr

[denvned]

This line tries to get a node that is not mounted:

react/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js

Line 586 in eb056fc

var node = ReactMount.getNode(id);

[jimfb]

cc @spicyj and @syranide because: events.

actually, calling setState on SSR might not be legal/valid, is it?

[sophiebits]

Yeah, I suppose setState should warn and do nothing. What did you expect would happen though?

[denvned]

Not only setState triggers this error. For example, forceUpdate also produces this.

I expect asynchronous updates to be ignored (with a warning) on components rendered using ReactDOMServer.renderToString.

[dominicenglish]

I also ran into this error when trying to update a codebase to make use of server-side rendering. There was a counter using setInterval initialised in the constructor for some reason that ended up trying to call setState.

I had trouble tracking the problem down as the error is pretty confusing in this case. Some sort of warning when setState is called would certainly help pinpoint the actual problem. I feel like it's a relatively easy mistake to make for those of us new to SSR.

[jimfb]

In dev mode, we could mark a component as having been rendered using SSR. If setState or forceUpdate is ever called on such a component, print an intelligent warning.

[mdolbin]

Hello, first attempts to dive into react sources here :) I took a look at similar issues but I still wonder if it's 'react-enough' way. I'm concerned about
if (this._reactInternalInstance && this._reactInternalInstance._isServerSideRendered) condition in particular. Am I on the right track or there is more convenient way to mark & check it? Thanks.

[jimfb]

@mdolbin That looks reasonable to me.

[gaearon]

Looks like this is up for grabs again as #5879 did not progress.
Some info on how to implement it: #5879 (comment).
I updated the fiddle demonstrating the issue (the error message is different in 15.x but the cause is the same): http://codepen.io/gaearon/pen/jryXOj

[rricard]

I think I found a way to use ReactNoopUpdateQueue in ReactServerRenderingTransaction. That way we can do as @spicyj advised. I send you a PR as soon as possible, maybe tonight, maybe tomorrow!

[rricard]

Okay, trick question: how can I let the setState go through in componentWillMount if I use ReactNoopUpdateQueue ?

My change, for instance, make fail https://github.com/facebook/react/blob/master/src/renderers/dom/server/__tests__/ReactServerRendering-test.js#L383

[rricard]

Answering my own question: maybe during initial mount, don't use (yet) the ReactNoopUpdateQueue.