Correct Flight client's condition for SSR and createServerReference (…

…#51723)

This PR addresses a problem where the `createServerReference` is using
the default condition of flight client (gets resolved to the Node
build), but we use the Edge build of flight client for SSR. This causes
2 flight clients to exist during SSR.

packages/next/src/build/webpack/loaders/next-flight-loader/action-client-wrapper.ts

@@ -1,12 +1,22 @@
 // This file must be bundled in the app's client layer, it shouldn't be directly
 // imported by the server.
 
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { createServerReference } from 'react-server-dom-webpack/client'
 import { callServer } from 'next/dist/client/app-call-server'
 
 // A noop wrapper to let the Flight client create the server reference.
 // See also: https://github.com/facebook/react/pull/26632
 export default function (id: string) {
+  // Since we're using the Edge build of Flight client for SSR [1], here we need to
+  // also use the same Edge build to create the reference. For the client bundle,
+  // we use the default and let Webpack to resolve it to the correct version.
+  // 1: https://github.com/vercel/next.js/blob/16eb80b0b0be13f04a6407943664b5efd8f3d7d0/packages/next/src/server/app-render/use-flight-response.tsx#L24-L26
+  const { createServerReference } = (
+    typeof window === 'undefined'
+      ? // eslint-disable-next-line import/no-extraneous-dependencies
+        require('react-server-dom-webpack/client.edge')
+      : // eslint-disable-next-line import/no-extraneous-dependencies
+        require('react-server-dom-webpack/client')
+  ) as typeof import('react-server-dom-webpack/client')
+
   return createServerReference(id, callServer)
 }