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

[overlookmotel]

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?

[gaearon]

This does sound like a bug. A fix would be welcome.

[overlookmotel]

OK great. Thanks for swift response. I'll submit a PR soon as I can - should be in next couple of weeks.

[overlookmotel]

I've submitted a PR #15023.

[overlookmotel]

@gaearon Anyone had a chance to look at my fix for this in PR #15023?

[ianks]

Now that react-apollo is using the Context API, our builds are broken because of this.

[gaearon]

We're planning to remove this attribute altogether. It only exists for hydration via ReactDOM.render to work. But that already warns that you should be using ReactDOM.hydrate instead. So I don't think we'll fix it.