From 689f521c3b3a8447c14572316319c4c25f2a8f51 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Sat, 7 May 2022 12:04:05 +0200
Subject: [PATCH] Use react dom server node api to detect react root is enabled

---
 packages/next/bin/next.ts            | 3 +--
 packages/next/server/next.ts         | 4 ++--
 packages/next/server/view-render.tsx | 6 ++++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/next/bin/next.ts b/packages/next/bin/next.ts
index bb99c8ad6471..ad8597d91797 100755
--- a/packages/next/bin/next.ts
+++ b/packages/next/bin/next.ts
@@ -43,8 +43,7 @@ const args = arg(
 )
 
 // Detect if react-dom is enabled streaming rendering mode
-const shouldUseReactRoot = !!require('react-dom/server.browser')
-  .renderToReadableStream
+const shouldUseReactRoot = !!require('react-dom/server').renderToPipeableStream
 
 // Version is inlined into the file using taskr build pipeline
 if (args['--version']) {
diff --git a/packages/next/server/next.ts b/packages/next/server/next.ts
index f2d46252a9a6..8469bf1b8bc1 100644
--- a/packages/next/server/next.ts
+++ b/packages/next/server/next.ts
@@ -185,8 +185,8 @@ function createServer(options: NextServerOptions): NextServer {
 
   // Make sure env of custom server is overridden.
   // Use dynamic require to make sure it's executed in it's own context.
-  const ReactDOMServer = require('react-dom/server.browser')
-  const shouldUseReactRoot = !!ReactDOMServer.renderToReadableStream
+  const ReactDOMServer = require('react-dom/server')
+  const shouldUseReactRoot = !!ReactDOMServer.renderToPipeableStream
   if (shouldUseReactRoot) {
     ;(process.env as any).__NEXT_REACT_ROOT = 'true'
   }
diff --git a/packages/next/server/view-render.tsx b/packages/next/server/view-render.tsx
index 827e1a2a92e0..ad8f2b1f52ff 100644
--- a/packages/next/server/view-render.tsx
+++ b/packages/next/server/view-render.tsx
@@ -17,12 +17,14 @@ import {
   continueFromInitialStream,
 } from './node-web-streams-helper'
 import { FlushEffectsContext } from '../shared/lib/flush-effects'
-// @ts-ignore react-dom/client exists when using React 18
-import ReactDOMServer from 'react-dom/server.browser'
 import { isDynamicRoute } from '../shared/lib/router/utils'
 import { tryGetPreviewData } from './api-utils/node'
 import DefaultRootLayout from '../lib/views-layout'
 
+const ReactDOMServer = process.env.__NEXT_REACT_ROOT
+  ? require('react-dom/server.browser')
+  : require('react-dom/server')
+
 export type RenderOptsPartial = {
   err?: Error | null
   dev?: boolean