Disallow comments as DOM containers for createRoot (#23321)

This is an old feature that we no longer support. `hydrateRoot` already
throws if you pass a comment node; this change makes `createRoot`
throw, too.

Still enabled in the Facebook build until we migrate the callers.

Author: acdlite

packages/react-dom/src/__tests__/ReactDOMRoot-test.js

@@ -402,4 +402,22 @@ describe('ReactDOMRoot', () => {
         'already rendering.',
     );
   });
+
+  // @gate disableCommentsAsDOMContainers
+  it('errors if container is a comment node', () => {
+    // This is an old feature used by www. Disabled in the open source build.
+    const div = document.createElement('div');
+    div.innerHTML = '<!-- react-mount-point-unstable -->';
+    const commentNode = div.childNodes[0];
+
+    expect(() => ReactDOM.createRoot(commentNode)).toThrow(
+      'createRoot(...): Target container is not a DOM element.',
+    );
+    expect(() => ReactDOM.hydrateRoot(commentNode)).toThrow(
+      'hydrateRoot(...): Target container is not a DOM element.',
+    );
+
+    // Still works in the legacy API
+    ReactDOM.render(<div />, commentNode);
+  });
 });

packages/react-dom/src/client/ReactDOMRoot.js

@@ -68,7 +68,10 @@ import {
   isAlreadyRendering,
 } from 'react-reconciler/src/ReactFiberReconciler';
 import {ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
-import {allowConcurrentByDefault} from 'shared/ReactFeatureFlags';
+import {
+  allowConcurrentByDefault,
+  disableCommentsAsDOMContainers,
+} from 'shared/ReactFeatureFlags';
 
 /* global reportError */
 const defaultOnRecoverableError =
@@ -153,7 +156,7 @@ export function createRoot(
   container: Container,
   options?: CreateRootOptions,
 ): RootType {
-  if (!isValidContainerLegacy(container)) {
+  if (!isValidContainer(container)) {
     throw new Error('createRoot(...): Target container is not a DOM element.');
   }
 
@@ -293,7 +296,10 @@ export function isValidContainer(node: any): boolean {
     node &&
     (node.nodeType === ELEMENT_NODE ||
       node.nodeType === DOCUMENT_NODE ||
-      node.nodeType === DOCUMENT_FRAGMENT_NODE)
+      node.nodeType === DOCUMENT_FRAGMENT_NODE ||
+      (!disableCommentsAsDOMContainers &&
+        node.nodeType === COMMENT_NODE &&
+        (node: any).nodeValue === ' react-mount-point-unstable '))
   );
 }
 

packages/shared/ReactFeatureFlags.js

@@ -68,6 +68,10 @@ export const enableSchedulerDebugging = false;
 // Disable javascript: URL strings in href for XSS protection.
 export const disableJavaScriptURLs = false;
 
+// Disable support for comment nodes as React DOM containers. Only supported
+// by www builds.
+export const disableCommentsAsDOMContainers = true;
+
 // Experimental Scope support.
 export const enableScopeAPI = false;
 

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -33,6 +33,7 @@ export const enableCache = false;
 export const enableSchedulerDebugging = false;
 export const debugRenderPhaseSideEffectsForStrictMode = true;
 export const disableJavaScriptURLs = false;
+export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
 export const warnAboutDeprecatedLifecycles = true;

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -25,6 +25,7 @@ export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
 export const enableCache = false;
 export const disableJavaScriptURLs = false;
+export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
 export const enableScopeAPI = false;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -25,6 +25,7 @@ export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
 export const enableCache = __EXPERIMENTAL__;
 export const disableJavaScriptURLs = false;
+export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
 export const enableScopeAPI = false;

packages/shared/forks/ReactFeatureFlags.test-renderer.native.js

@@ -25,6 +25,7 @@ export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
 export const enableCache = false;
 export const disableJavaScriptURLs = false;
+export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
 export const enableScopeAPI = false;

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -26,6 +26,7 @@ export const enableLazyElements = false;
 export const enableCache = true;
 export const enableSchedulerDebugging = false;
 export const disableJavaScriptURLs = false;
+export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
 export const enableScopeAPI = true;
 export const enableCreateEventHandleAPI = false;

packages/shared/forks/ReactFeatureFlags.testing.js

@@ -25,6 +25,7 @@ export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
 export const enableCache = __EXPERIMENTAL__;
 export const disableJavaScriptURLs = false;
+export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
 export const enableScopeAPI = false;

packages/shared/forks/ReactFeatureFlags.testing.www.js

@@ -25,6 +25,7 @@ export const enableSelectiveHydration = true;
 export const enableLazyElements = false;
 export const enableCache = true;
 export const disableJavaScriptURLs = true;
+export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
 export const enableScopeAPI = true;

packages/shared/forks/ReactFeatureFlags.www.js

@@ -74,6 +74,10 @@ export const enableCache = true;
 
 export const disableJavaScriptURLs = true;
 
+// TODO: www currently relies on this feature. It's disabled in open source.
+// Need to remove it.
+export const disableCommentsAsDOMContainers = false;
+
 export const disableModulePatternComponents = true;
 
 export const enableCreateEventHandleAPI = true;