Bug: unable to render to document when using createRoot

[aweary]

With react@next and react-dom@next trying to create a root with document:

const root = ReactDOM.createRoot(document);
root.render(<App />);

Throws the error:

HierarchyRequestError
Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

https://codesandbox.io/s/infallible-resonance-gqu0j?file=/src/index.js

[gaearon]

I think you want {hydrate: true} on the createRoot call. Not the individual render call.

[aweary]

@gaearon ah yeah, you're right. though the error does occur without hydrate https://codesandbox.io/s/tender-gauss-8cvm0?file=/src/index.js though rendering to document when not hydrating is probably less common

[gaearon]

rendering to document when not hydrating is probably less common

Is that something we previously supported?

[aweary]

is that something we previously supported?

It does work with ReactDOM.render https://codesandbox.io/s/zen-currying-r0ewz?file=/src/index.js

[eps1lon]

@sebmarkbage confirmed recently that this is intended:

Document also doesn't really work on createRoot. Only hydrateRoot should have Document as an option.

You can however pass document.documentElement to createRoot which is slightly different.

-- https://github.com/DefinitelyTyped/DefinitelyTyped/pull/59059#discussion_r828512028

It would help if this issue contains a concrete use case beyond "it worked before".

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[eps1lon]

This will be supported in React 19. The original sandbox "just works" in the latest Canary release: https://codesandbox.io/p/sandbox/stupefied-cloud-wmcj43?file=%2Fpackage.json%3A9%2C51

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!