fix: react root enabled properly in custom server

[huozhi]

Fixes #36643

Bug

• hoist react dom choosing in client
• also assign __NEXT_REACT_ROOT env in custom server

• Related issues linked using fixes #number
• Integration tests added
• Errors have helpful link attached, see contributing.md

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js react-root	Change
buildDuration	22.2s	21.9s	-243ms
buildDurationCached	8.3s	8.7s	⚠️ +493ms
nodeModulesSize	475 MB	475 MB	⚠️ +642 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	huozhi/next.js react-root	Change
/ failed reqs	0	0	✓
/ total time (seconds)	5.559	5.46	-0.1
/ avg req/sec	449.73	457.9	+8.17
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.326	2.215	-0.11
/error-in-render avg req/sec	1074.95	1128.61	+53.66

Client Bundles (main, webpack) Overall decrease ✓

	vercel/next.js canary	huozhi/next.js react-root	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	28.7 kB	28.7 kB	-2 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72.3 kB	72.3 kB	-2 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	huozhi/next.js react-root	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	huozhi/next.js react-root	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	308 B	308 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	3.08 kB	3.08 kB	✓
head-HASH.js gzip	359 B	359 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.71 kB	5.71 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.64 kB	2.64 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	391 B	391 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.3 kB	16.3 kB	✓

Client Build Manifests

	vercel/next.js canary	huozhi/next.js react-root	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	huozhi/next.js react-root	Change
index.html gzip	533 B	533 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Diffs

Diff for main-HASH.js

@@ -458,7 +458,6 @@
       exports.emitter = exports.router = exports.version = void 0;
       __webpack_require__(37);
       var _react = _interopRequireWildcard1(__webpack_require__(7294));
-      var _reactDom = _interopRequireDefault1(__webpack_require__(3935));
       var _headManagerContext = __webpack_require__(4664);
       var _mitt = _interopRequireDefault1(__webpack_require__(8550));
       var _routerContext = __webpack_require__(2692);
@@ -627,6 +626,7 @@
         }
         return target;
       }
+      var ReactDOM = false ? 0 : __webpack_require__(3935);
       var version = "12.1.7-canary.1";
       exports.version = version;
       var router;
@@ -1179,14 +1179,14 @@
           shouldHydrate ? markHydrateComplete : markRenderComplete
         );
         if (false) {
-          var startTransition, ReactDOMClient;
+          var startTransition;
         } else {
           // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldHydrate) {
-            _reactDom.default.hydrate(reactEl, domEl);
+            ReactDOM.hydrate(reactEl, domEl);
             shouldHydrate = false;
           } else {
-            _reactDom.default.render(reactEl, domEl);
+            ReactDOM.render(reactEl, domEl);
           }
         }
       }

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-480ef41111991a4a.js"
+      src="/_next/static/chunks/main-378f64a244875d07.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-480ef41111991a4a.js"
+      src="/_next/static/chunks/main-378f64a244875d07.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-480ef41111991a4a.js"
+      src="/_next/static/chunks/main-378f64a244875d07.js"
       defer=""
     ></script>
     <script

---

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js react-root	Change
buildDuration	24.3s	23.9s	-354ms
buildDurationCached	8s	8.2s	⚠️ +202ms
nodeModulesSize	475 MB	475 MB	⚠️ +642 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	huozhi/next.js react-root	Change
/ failed reqs	0	0	✓
/ total time (seconds)	5.543	5.341	-0.2
/ avg req/sec	451.03	468.05	+17.02
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.227	2.247	⚠️ +0.02
/error-in-render avg req/sec	1122.52	1112.76	⚠️ -9.76

Client Bundles (main, webpack) Overall decrease ✓

	vercel/next.js canary	huozhi/next.js react-root	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	29.1 kB	29.1 kB	-4 B
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	73 kB	73 kB	-4 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	huozhi/next.js react-root	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	huozhi/next.js react-root	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	324 B	324 B	✓
dynamic-HASH.js gzip	3.08 kB	3.08 kB	✓
head-HASH.js gzip	357 B	357 B	✓
hooks-HASH.js gzip	921 B	921 B	✓
image-HASH.js gzip	5.76 kB	5.76 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.76 kB	2.76 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	392 B	392 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.5 kB	16.5 kB	✓

Client Build Manifests

	vercel/next.js canary	huozhi/next.js react-root	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	huozhi/next.js react-root	Change
index.html gzip	529 B	529 B	✓
link.html gzip	543 B	543 B	✓
withRouter.html gzip	527 B	526 B	-1 B
Overall change	1.6 kB	1.6 kB	-1 B

Diffs

Diff for main-HASH.js

@@ -458,7 +458,6 @@
       exports.emitter = exports.router = exports.version = void 0;
       __webpack_require__(37);
       var _react = _interopRequireWildcard1(__webpack_require__(7294));
-      var _reactDom = _interopRequireDefault1(__webpack_require__(3935));
       var _headManagerContext = __webpack_require__(4664);
       var _mitt = _interopRequireDefault1(__webpack_require__(8550));
       var _routerContext = __webpack_require__(2692);
@@ -627,6 +626,7 @@
         }
         return target;
       }
+      var ReactDOM = false ? 0 : __webpack_require__(3935);
       var version = "12.1.7-canary.1";
       exports.version = version;
       var router;
@@ -1179,14 +1179,14 @@
           shouldHydrate ? markHydrateComplete : markRenderComplete
         );
         if (false) {
-          var startTransition, ReactDOMClient;
+          var startTransition;
         } else {
           // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldHydrate) {
-            _reactDom.default.hydrate(reactEl, domEl);
+            ReactDOM.hydrate(reactEl, domEl);
             shouldHydrate = false;
           } else {
-            _reactDom.default.render(reactEl, domEl);
+            ReactDOM.render(reactEl, domEl);
           }
         }
       }

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-480ef41111991a4a.js"
+      src="/_next/static/chunks/main-378f64a244875d07.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-480ef41111991a4a.js"
+      src="/_next/static/chunks/main-378f64a244875d07.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-480ef41111991a4a.js"
+      src="/_next/static/chunks/main-378f64a244875d07.js"
       defer=""
     ></script>
     <script

Commit: dffc12f