Pick esm main fields and condition names first for RSC server layer

packages/next/src/build/webpack-config.ts

@@ -97,6 +97,17 @@ const reactPackagesRegex = /^(react|react-dom|react-server-dom-webpack)($|\/)/
 const asyncStoragesRegex =
   /next[\\/]dist[\\/]client[\\/]components[\\/](static-generation-async-storage|action-async-storage|request-async-storage)/
 
+// exports.<conditionName>
+const edgeConditionNames = [
+  'edge-light',
+  'worker',
+  'browser',
+  'import',
+  'module',
+  'default',
+]
+
+// packageJson.<mainField>
 const mainFieldsPerCompiler: Record<CompilerNameValues, string[]> = {
   [COMPILER_NAMES.server]: ['main', 'module'],
   [COMPILER_NAMES.client]: ['browser', 'module', 'main'],
@@ -908,12 +919,7 @@ export default async function getBaseWebpackConfig(
 
   const reactServerCondition = [
     'react-server',
-    ...mainFieldsPerCompiler[
-      isEdgeServer ? COMPILER_NAMES.edgeServer : COMPILER_NAMES.server
-    ],
-    'node',
-    'import',
-    'require',
+    ...(isEdgeServer ? edgeConditionNames : ['import', 'module', 'default']),
   ]
 
   const clientEntries = isClient
@@ -1149,11 +1155,7 @@ export default async function getBaseWebpackConfig(
       : undefined),
     mainFields: mainFieldsPerCompiler[compilerType],
     ...(isEdgeServer && {
-      conditionNames: [
-        ...mainFieldsPerCompiler[COMPILER_NAMES.edgeServer],
-        'import',
-        'node',
-      ],
+      conditionNames: edgeConditionNames,
     }),
     plugins: [],
   }

test/e2e/app-dir/app-external/app-external.test.ts

@@ -159,6 +159,12 @@ createNextDescribe(
         const v1 = html.match(/App React Version: ([^<]+)</)[1]
         const v2 = html.match(/External React Version: ([^<]+)</)[1]
         expect(v1).toBe(v2)
+
+        // Should work with both esm and cjs imports
+        expect(html).toContain(
+          'CJS-ESM Compat package: cjs-esm-compat/index.mjs'
+        )
+        expect(html).toContain('CJS package: cjs-lib')
       })
 
       it('should use the same react in server app', async () => {
@@ -167,6 +173,12 @@ createNextDescribe(
         const v1 = html.match(/App React Version: ([^<]+)</)[1]
         const v2 = html.match(/External React Version: ([^<]+)</)[1]
         expect(v1).toBe(v2)
+
+        // Should work with both esm and cjs imports
+        expect(html).toContain(
+          'CJS-ESM Compat package: cjs-esm-compat/index.mjs'
+        )
+        expect(html).toContain('CJS package: cjs-lib')
       })
 
       it('should use the same react in pages', async () => {
@@ -190,24 +202,25 @@ createNextDescribe(
 
     if (isNextDev) {
       it('should error for wildcard exports of client module references in esm', async () => {
-        const page = 'app/esm-client-ref/page.js'
-        const pageSource = await next.readFile(page)
+        const page = 'app/cjs-import-esm/page.js'
+        // reuse esm-client-ref/page.js
+        const pageSource = await next.readFile('app/esm-client-ref/page.js')
 
         try {
           await next.patchFile(
             page,
             pageSource.replace(
               "'client-esm-module'",
-              "'client-esm-module-wildcard'"
+              "'client-cjs-import-esm-wildcard'"
             )
           )
-          await next.render('/esm-client-ref')
+          await next.render('/cjs-import-esm')
         } finally {
           await next.patchFile(page, pageSource)
         }
 
         expect(next.cliOutput).toInclude(
-          `It's currently unsupported to use "export *" in a client boundary. Please use named exports instead.`
+          `ESM packages (client-esm-module-wildcard) need to be imported`
         )
       })
     }

test/e2e/app-dir/app-external/app/esm/client/page.js

@@ -1,7 +1,9 @@
 'use client'
-import { version, useValue } from 'esm-with-react'
 
 import React from 'react'
+import { version, useValue } from 'esm-with-react'
+import { packageEntry as compatPackageEntry } from 'cjs-esm-compat'
+import { packageName } from 'cjs-lib'
 
 export default function Index() {
   const value = useValue()
@@ -10,6 +12,8 @@ export default function Index() {
       <h2>{'App React Version: ' + React.version}</h2>
       <h2>{'External React Version: ' + version}</h2>
       <h2>{'Test: ' + value}</h2>
+      <h2>{`CJS-ESM Compat package: ${compatPackageEntry}`}</h2>
+      <h2>{`CJS package: ${packageName}`}</h2>
     </div>
   )
 }

test/e2e/app-dir/app-external/app/esm/server/page.js

@@ -1,4 +1,6 @@
 import { version } from 'esm-with-react'
+import { packageEntry as compatPackageEntry } from 'cjs-esm-compat'
+import { packageName } from 'cjs-lib'
 
 import React from 'react'
 
@@ -7,6 +9,8 @@ export default function Index() {
     <div>
       <h2>{'App React Version: ' + React.version}</h2>
       <h2>{'External React Version: ' + version}</h2>
+      <h2>{`CJS-ESM Compat package: ${compatPackageEntry}`}</h2>
+      <h2>{`CJS package: ${packageName}`}</h2>
     </div>
   )
 }

test/e2e/app-dir/app-external/middleware.js

@@ -1,4 +1,4 @@
-import { createResponse } from 'cjs-lib'
+import { createResponse } from 'next-server-cjs-lib'
 import { respond } from 'compat-next-server-module'
 
 export async function middleware(request) {

test/e2e/app-dir/app-external/node_modules_bak/cjs-esm-compat/index.cjs

@@ -0,0 +1 @@
+exports.packageEntry = 'cjs-esm-compat/index.cjs'

test/e2e/app-dir/app-external/node_modules_bak/cjs-esm-compat/index.mjs

@@ -0,0 +1 @@
+export const packageEntry = 'cjs-esm-compat/index.mjs'

test/e2e/app-dir/app-external/node_modules_bak/cjs-esm-compat/package.json

@@ -0,0 +1,7 @@
+{
+  "exports": {
+    "import": "./index.mjs",
+    "require": "./index.cjs",
+    "default": "./index.cjs"
+  }
+}

test/e2e/app-dir/app-external/node_modules_bak/cjs-lib/index.js

@@ -1,8 +1 @@
-Object.defineProperty(exports, '__esModule', { value: true })
-const server_1 = require('next/server')
-const createResponse = (...args) => {
-  return new server_1.NextResponse(...args)
-}
-exports.createResponse = createResponse
-
-// Note: this is a CJS library that used the `NextResponse` export from `next/server`.
+exports.packageName = 'cjs-lib'

test/e2e/app-dir/app-external/node_modules_bak/client-cjs-import-esm-wildcard/index.js

@@ -0,0 +1,3 @@
+'use client'
+
+module.exports = require('client-esm-module-wildcard')

test/e2e/app-dir/app-external/node_modules_bak/client-cjs-import-esm-wildcard/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "client-cjs-import-esm-wildcard",
+  "type": "commonjs",
+  "exports": "./index.js"
+}

test/e2e/app-dir/app-external/node_modules_bak/next-server-cjs-lib/index.js

@@ -0,0 +1,9 @@
+Object.defineProperty(exports, '__esModule', { value: true })
+const server_1 = require('next/server')
+const createResponse = (...args) => {
+  return new server_1.NextResponse(...args)
+}
+exports.createResponse = createResponse
+
+exports.packageName = 'cjs-lib'
+// Note: this is a CJS library that used the `NextResponse` export from `next/server`.

test/e2e/app-dir/app-external/node_modules_bak/next-server-cjs-lib/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "next-server-cjs-lib",
+  "exports": "./index.js"
+}