Fix bundling and module resolution in the server layer

packages/next/build/webpack-config.ts

@@ -826,14 +826,6 @@ export default async function getBaseWebpackConfig(
     [COMPILER_NAMES.edgeServer]: ['browser', 'module', 'main'],
   }
 
-  const reactAliases = {
-    react: reactDir,
-    'react-dom$': reactDomDir,
-    'react-dom/server$': `${reactDomDir}/server`,
-    'react-dom/server.browser$': `${reactDomDir}/server.browser`,
-    'react-dom/client$': `${reactDomDir}/client`,
-  }
-
   const resolveConfig = {
     // Disable .mjs for node_modules bundling
     extensions: isNodeServer
@@ -846,7 +838,11 @@ export default async function getBaseWebpackConfig(
     alias: {
       next: NEXT_PROJECT_ROOT,
 
-      ...reactAliases,
+      react: reactDir,
+      'react-dom$': reactDomDir,
+      'react-dom/server$': `${reactDomDir}/server`,
+      'react-dom/server.browser$': `${reactDomDir}/server.browser`,
+      'react-dom/client$': `${reactDomDir}/client`,
 
       'styled-jsx/style$': require.resolve(`styled-jsx/style`),
       'styled-jsx$': require.resolve(`styled-jsx`),
@@ -1002,32 +998,10 @@ export default async function getBaseWebpackConfig(
       return `commonjs next/dist/lib/import-next-warning`
     }
 
-    const resolveWithReactServerCondition =
-      layer === WEBPACK_LAYERS.server
-        ? getResolve({
-            // If React is aliased to another channel during Next.js' local development,
-            // we need to provide that alias to webpack's resolver.
-            alias: process.env.__NEXT_REACT_CHANNEL
-              ? {
-                  ...reactAliases,
-                  'react/package.json': `${reactDir}/package.json`,
-                  'react/jsx-runtime': `${reactDir}/jsx-runtime`,
-                  'react/jsx-dev-runtime': `${reactDir}/jsx-dev-runtime`,
-                  'react-dom/package.json': `${reactDomDir}/package.json`,
-                }
-              : false,
-            conditionNames: ['react-server'],
-          })
-        : null
-
     // Special internal modules that must be bundled for Server Components.
     if (layer === WEBPACK_LAYERS.server) {
-      if (!isLocal && /^react(?:$|\/)/.test(request)) {
-        const [resolved] = await resolveWithReactServerCondition!(
-          context,
-          request
-        )
-        return resolved
+      if (!isLocal && /^react$/.test(request)) {
+        return
       }
       if (
         request ===
@@ -1158,16 +1132,8 @@ export default async function getBaseWebpackConfig(
 
     if (/node_modules[/\\].*\.[mc]?js$/.test(res)) {
       if (layer === WEBPACK_LAYERS.server) {
-        try {
-          const [resolved] = await resolveWithReactServerCondition!(
-            context,
-            request
-          )
-          return resolved
-        } catch (err) {
-          // The `react-server` condition is not matched, fallback.
-          return
-        }
+        // All packages should be bundled for the server layer
+        return
       }
 
       // Anything else that is standard JavaScript within `node_modules`

packages/next/build/webpack/plugins/flight-client-entry-plugin.ts

@@ -11,7 +11,14 @@ import type {
   ClientComponentImports,
   NextFlightClientEntryLoaderOptions,
 } from '../loaders/next-flight-client-entry-loader'
-import { APP_DIR_ALIAS } from '../../../lib/constants'
+import {
+  APP_DIR_ALIAS,
+  DOT_NEXT_ALIAS,
+  PAGES_DIR_ALIAS,
+  ROOT_DIR_ALIAS,
+  RSC_MOD_REF_PROXY_ALIAS,
+  WEBPACK_LAYERS,
+} from '../../../lib/constants'
 import {
   COMPILER_NAMES,
   FLIGHT_SERVER_CSS_MANIFEST,
@@ -55,6 +62,47 @@ export class FlightClientEntryPlugin {
           (webpack as any).dependencies.ModuleDependency,
           new (webpack as any).dependencies.NullDependency.Template()
         )
+
+        normalModuleFactory.hooks.resolve.tap(
+          PLUGIN_NAME,
+          function (resolveData: any) {
+            if (
+              resolveData.contextInfo.issuerLayer === WEBPACK_LAYERS.server &&
+              // TODO-APP: Handle edge-server here correctly.
+              resolveData.contextInfo.compiler === 'server'
+            ) {
+              if (
+                [
+                  PAGES_DIR_ALIAS,
+                  ROOT_DIR_ALIAS,
+                  DOT_NEXT_ALIAS,
+                  APP_DIR_ALIAS,
+                  RSC_MOD_REF_PROXY_ALIAS,
+                ].some((alias) => resolveData.request.startsWith(alias))
+              ) {
+                return
+              }
+
+              resolveData.resolveOptions = {
+                ...resolveData.resolveOptions,
+                conditionNames: ['react-server'],
+                alias: process.env.__NEXT_REACT_CHANNEL
+                  ? {
+                      react: `react-${process.env.__NEXT_REACT_CHANNEL}`,
+                      'react/package.json': `react-${process.env.__NEXT_REACT_CHANNEL}/package.json`,
+                      'react/jsx-runtime': `react-${process.env.__NEXT_REACT_CHANNEL}/jsx-runtime`,
+                      'react/jsx-dev-runtime': `react-${process.env.__NEXT_REACT_CHANNEL}/jsx-dev-runtime`,
+                      'react-dom': `react-dom-${process.env.__NEXT_REACT_CHANNEL}`,
+                      'react-dom/package.json': `react-dom-${process.env.__NEXT_REACT_CHANNEL}/package.json`,
+                      'react-dom/server': `react-dom-${process.env.__NEXT_REACT_CHANNEL}/server`,
+                      'react-dom/server.browser': `react-dom-${process.env.__NEXT_REACT_CHANNEL}/server.browser`,
+                      'react-dom/client': `react-dom-${process.env.__NEXT_REACT_CHANNEL}/client`,
+                    }
+                  : false,
+              }
+            }
+          }
+        )
       }
     )
 

test/e2e/app-dir/rsc-basic.test.ts

@@ -406,13 +406,18 @@ describe('app dir - react server components', () => {
     })
   })
 
-  it('should resolve 3rd party package exports based on the react-server condition', async () => {
+  it.only('should resolve 3rd party package exports based on the react-server condition', async () => {
     await fetchViaHTTP(next.url, '/react-server/3rd-party-package').then(
       async (response) => {
         const result = await resolveStreamResponse(response)
-        expect(result).toContain('Server: index.react-server')
+
+        // Package should be resolved based on the react-server condition,
+        // as well as package's dependencies.
+        expect(result).toContain('Server: index.react-server:react.subset')
+        expect(result).toContain('Client: index.default:react.full')
+
+        // Subpath exports should be resolved based on the condition too.
         expect(result).toContain('Server subpath: subpath.react-server')
-        expect(result).toContain('Client: index.default')
         expect(result).toContain('Client subpath: subpath.default')
       }
     )

test/e2e/app-dir/rsc-basic/node_modules_bak/conditional-exports/index.js

@@ -1 +1,4 @@
-module.exports = 'index.default'
+const react = require('react')
+
+module.exports =
+  'index.default:' + ('useState' in react ? 'react.full' : 'react.subset')

test/e2e/app-dir/rsc-basic/node_modules_bak/conditional-exports/index.server.js

@@ -1 +1,4 @@
-module.exports = 'index.react-server'
+const react = require('react')
+
+module.exports =
+  'index.react-server:' + ('useState' in react ? 'react.full' : 'react.subset')