Dev Tools + ReactDOMServer.renderToStaticMarkup() throws "React DOM tree root should always have a node reference"

[philippe-git]

Starting one day ago, which seems to coincide with the latest release of the React Dev Tools on Chrome, I've started seeing the following error in a project that makes a few calls to ReactDOMServer.renderToStaticMarkup() for rendering static markup inside html tooltips.

invariant.js:44 Uncaught Error: React DOM tree root should always have a node reference.
    at invariant (https://local.buffer.com/js/bundles/multiple_composers_bundle.1493897626.js:9004:16)
    at getNodeFromInstance (https://local.buffer.com/js/bundles/multiple_composers_bundle.1493897626.js:12571:66)
    at ReactDOMComponent.getPublicInstance (https://local.buffer.com/js/bundles/multiple_composers_bundle.1493897626.js:19999:13)
    at getData (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8642:44)
    at Object.mountComponent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8460:21)
    at Object.obj.(anonymous function) [as mountComponent] (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8538:9)
    at ReactDOMComponent.mountChildren (https://local.buffer.com/js/bundles/multiple_composers_bundle.1493897626.js:22641:45)
    at ReactDOMComponent._createContentMarkup (https://local.buffer.com/js/bundles/multiple_composers_bundle.1493897626.js:19659:33)
    at ReactDOMComponent.mountComponent (https://local.buffer.com/js/bundles/multiple_composers_bundle.1493897626.js:19526:30)
    at Object.mountComponent (https://local.buffer.com/js/bundles/multiple_composers_bundle.1493897626.js:16049:36)

Seeing the React Dev Tools in the trace, I flipped it on/off and tried to repro, expecting to see a correlation. It was a bit too sporadic to know for sure if the Dev Tools were the actual cause, but other users have reported the same issue with React Dev Tools (in facebook/react#6232#issuecomment-298708568, which is why I'm cross-posting in the right repo). This + the date make me pretty confident that the two are linked.

This is happening with both dev and prod builds of React, so if this indeed impacts all React Dev Tools users visiting apps that make use of ReactDOMServer on the client, this could be pretty severe.

Happy to provide any more info if needed!

[gaearon]

Do you mean you’re calling ReactDOMServer.renderToStaticMarkup() on the client?

[philippe-git]

👍 We do so to generate safe HTML and feed it to a util that only accepts HTML strings, a use-case for which I've seen ReactDOMServer.renderToStaticMarkup() being suggested by some React contributors – hopefully that remains safe to use on the client in the future. Thanks for the quick fix in #683!

[gaearon]

I wouldn't recommend it because ReactDOMServer is basically a complete separate reimplementation of ReactDOM in the future versions.

Instead, you can use ReactDOM.render() to render into an element, and then read its innerHTML.

(This is unrelated to the fix—just suggesting a recommended approach.)

[gaearon]

This is fixed in React DevTools 2.1.7 which will appear on Chrome addon store within an hour.
You can check if it's updated yet here:

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Cheers!

[philippe-git]

That's great advice, we'll probably end up doing that. Thanks a bunch for that and the speedy new release! 👌