Restrict React DOM imports from Server Components (facebook#27382)

Adds a separate entry point for the react-dom package when it's accessed
from a Server Component environment, using the "react-server" export
condition.

When you're inside a Server Component module, you won't be able to
import client-only APIs like useState. This applies to almost all React
DOM exports, except for Float ones like preload.

Author: acdlite

packages/react-dom/npm/react-dom.shared-subset.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-dom.shared-subset.production.min.js');
+} else {
+  module.exports = require('./cjs/react-dom.shared-subset.development.js');
+}

packages/react-dom/package.json

@@ -46,7 +46,10 @@
     "umd/"
   ],
   "exports": {
-    ".": "./index.js",
+    ".": {
+      "react-server": "./react-dom.shared-subset.js",
+      "default": "./index.js"
+    },
     "./client": "./client.js",
     "./server": {
       "workerd": "./server.edge.js",

packages/react-dom/src/ReactDOMSharedSubset.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// This is the subset of APIs that can be accessed from Server Component modules
+export {default as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED} from './ReactDOMSharedInternals';
+export {
+  prefetchDNS,
+  preconnect,
+  preload,
+  preloadModule,
+  preinit,
+  preinitModule,
+} from './shared/ReactDOMFloat';

scripts/rollup/bundles.js

@@ -165,6 +165,18 @@ const bundles = [
     externals: ['react'],
   },
 
+  /******* React DOM Shared Subset *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-dom/src/ReactDOMSharedSubset.js',
+    name: 'react-dom.shared-subset',
+    global: 'ReactDOM',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+
   /******* Test Utils *******/
   {
     moduleType: RENDERER_UTILS,

scripts/rollup/forks.js

@@ -84,7 +84,11 @@ const forks = Object.freeze({
     entry,
     dependencies
   ) => {
-    if (entry === 'react-dom' || entry === 'react-dom/server-rendering-stub') {
+    if (
+      entry === 'react-dom' ||
+      entry === 'react-dom/server-rendering-stub' ||
+      entry === 'react-dom/src/ReactDOMSharedSubset.js'
+    ) {
       return './packages/react-dom/src/ReactDOMSharedInternals.js';
     }
     if (

scripts/shared/inlinedHostConfigs.js

@@ -11,6 +11,7 @@ module.exports = [
     shortName: 'dom-node',
     entryPoints: [
       'react-dom',
+      'react-dom/src/ReactDOMSharedSubset.js',
       'react-dom/unstable_testing',
       'react-dom/src/server/react-dom-server.node.js',
       'react-dom/static.node',
@@ -21,6 +22,7 @@ module.exports = [
     ],
     paths: [
       'react-dom',
+      'react-dom/src/ReactDOMSharedSubset.js',
       'react-dom-bindings',
       'react-dom/client',
       'react-dom/server',
@@ -73,6 +75,7 @@ module.exports = [
     ],
     paths: [
       'react-dom',
+      'react-dom/src/ReactDOMSharedSubset.js',
       'react-dom-bindings',
       'react-dom/client',
       'react-dom/server.browser',
@@ -101,6 +104,7 @@ module.exports = [
     entryPoints: ['react-server-dom-esm/client.browser'],
     paths: [
       'react-dom',
+      'react-dom/src/ReactDOMSharedSubset.js',
       'react-dom/client',
       'react-dom/server',
       'react-dom/server.node',
@@ -128,6 +132,7 @@ module.exports = [
     ],
     paths: [
       'react-dom',
+      'react-dom/src/ReactDOMSharedSubset.js',
       'react-dom-bindings',
       'react-dom/client',
       'react-dom/server.edge',
@@ -158,6 +163,7 @@ module.exports = [
     ],
     paths: [
       'react-dom',
+      'react-dom/src/ReactDOMSharedSubset.js',
       'react-dom-bindings',
       'react-dom/client',
       'react-dom/server',
@@ -192,6 +198,7 @@ module.exports = [
     ],
     paths: [
       'react-dom',
+      'react-dom/src/ReactDOMSharedSubset.js',
       'react-dom-bindings',
       'react-dom/client',
       'react-dom/server',
@@ -224,6 +231,7 @@ module.exports = [
     ],
     paths: [
       'react-dom',
+      'react-dom/src/ReactDOMSharedSubset.js',
       'react-dom-bindings',
       'react-server-dom-webpack',
       'react-dom/src/server/ReactDOMLegacyServerImpl.js', // not an entrypoint, but only usable in *Brower and *Node files
@@ -241,6 +249,7 @@ module.exports = [
     entryPoints: ['react-server-dom-fb/src/ReactDOMServerFB.js'],
     paths: [
       'react-dom',
+      'react-dom/src/ReactDOMSharedSubset.js',
       'react-dom-bindings',
       'react-server-dom-fb',
       'shared/ReactDOMSharedInternals',