Fix nested esm package default import resolving mismatch

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

@@ -730,13 +730,8 @@ export default async function getBaseWebpackConfig(
   const shouldIncludeExternalDirs =
     config.experimental.externalDir || !!config.transpilePackages
 
-  const codeCondition = {
-    test: /\.(tsx|ts|js|cjs|mjs|jsx)$/,
-    ...(shouldIncludeExternalDirs
-      ? // Allowing importing TS/TSX files from outside of the root dir.
-        {}
-      : { include: [dir, ...babelIncludeRegexes] }),
-    exclude: (excludePath: string) => {
+  function createLoaderRuleExclude(skipNodeModules: boolean) {
+    return (excludePath: string) => {
       if (babelIncludeRegexes.some((r) => r.test(excludePath))) {
         return false
       }
@@ -747,8 +742,17 @@ export default async function getBaseWebpackConfig(
       )
       if (shouldBeBundled) return false
 
-      return excludePath.includes('node_modules')
-    },
+      return skipNodeModules && excludePath.includes('node_modules')
+    }
+  }
+
+  const codeCondition = {
+    test: /\.(tsx|ts|js|cjs|mjs|jsx)$/,
+    ...(shouldIncludeExternalDirs
+      ? // Allowing importing TS/TSX files from outside of the root dir.
+        {}
+      : { include: [dir, ...babelIncludeRegexes] }),
+    exclude: createLoaderRuleExclude(true),
   }
 
   let webpackConfig: webpack.Configuration = {
@@ -1401,12 +1405,17 @@ export default async function getBaseWebpackConfig(
                     use: swcLoaderForServerLayer,
                   },
                   {
-                    ...codeCondition,
-                    issuerLayer: [
-                      WEBPACK_LAYERS.appPagesBrowser,
-                      WEBPACK_LAYERS.serverSideRendering,
-                    ],
+                    test: codeCondition.test,
                     exclude: codeCondition.exclude,
+                    issuerLayer: [WEBPACK_LAYERS.appPagesBrowser],
+                    use: swcLoaderForClientLayer,
+                    resolve: {
+                      mainFields: getMainField('app', compilerType),
+                    },
+                  },
+                  {
+                    test: codeCondition.test,
+                    issuerLayer: [WEBPACK_LAYERS.serverSideRendering],
                     use: swcLoaderForClientLayer,
                     resolve: {
                       mainFields: getMainField('app', compilerType),

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

@@ -168,6 +168,9 @@ createNextDescribe(
           'CJS-ESM Compat package: cjs-esm-compat/index.mjs'
         )
         expect(html).toContain('CJS package: cjs-lib')
+        expect(html).toContain(
+          'Nested imports: nested-import:esm:cjs-esm-compat/index.mjs'
+        )
       })
 
       it('should use the same react in server app', async () => {

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

@@ -4,6 +4,7 @@ import React from 'react'
 import { version, useValue } from 'esm-with-react'
 import { packageEntry as compatPackageEntry } from 'cjs-esm-compat'
 import { packageName } from 'cjs-lib'
+import nestedImportExportDefaultValue from 'nested-import-export-default'
 
 export default function Index() {
   const value = useValue()
@@ -14,6 +15,7 @@ export default function Index() {
       <h2>{'Test: ' + value}</h2>
       <h2>{`CJS-ESM Compat package: ${compatPackageEntry}`}</h2>
       <h2>{`CJS package: ${packageName}`}</h2>
+      <h2>{`Nested imports: ${nestedImportExportDefaultValue}`}</h2>
     </div>
   )
 }

test/e2e/app-dir/app-external/node_modules_bak/nested-import-export-default/index.cjs

@@ -0,0 +1,3 @@
+const value = require('cjs-esm-compat').packageEntry
+
+exports.default = 'nested-import:cjs:' + value

test/e2e/app-dir/app-external/node_modules_bak/nested-import-export-default/index.mjs

@@ -0,0 +1,5 @@
+import { packageEntry as value } from 'cjs-esm-compat'
+
+const packageEntry = 'nested-import:esm:' + value
+
+export default packageEntry

test/e2e/app-dir/app-external/node_modules_bak/nested-import-export-default/package.json

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