React: `data-reactroot=""` lost in server render if element inside `<Context.Provider>`

Created on 5 Mar 2019 · 5Comments · Source: facebook/react

Do you want to request a feature or report a bug?

Bug.

What is the current behavior?

Calling .renderToString() on <React.Fragment><div>Hello!</div></React.Fragment> produces <div data-reactroot="">Hello!</div>.

However, many other combinations of DOM root element within "invisible" React elements are rendered without data-reactroot="".

e.g. all of the following produce <div>Hello!</div> (without data-reactroot=""):

<React.Fragment><React.Fragment><div>Hello!</div></React.Fragment></React.Fragment>

<Context.Provider><div>Hello!</div></Context.Provider>

<Context.Consumer>{() => <div>Hello!</div>}</Context.Consumer>

<React.StrictMode><div>Hello!</div></React.StrictMode>

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

See above.

What is the expected behavior?

I assume that any of the above examples should produce markup including data-reactroot="" on the div element.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Issue present in all versions >= 16.7.0, possibly earlier versions too.

This is a minor issue - I guess would only affect where the markup is rehydrated on client side using .render() rather than .hydrate() - usage which is discouraged. However, using .render() to rehydrate is still officially supported.

I can implement a fix and make a PR. But can anyone confirm that the expected behavior is what I think it is, and that this is indeed a bug?

Server Rendering Bug

Source