Fix nested esm package default import resolving mismatch (#57784)

For app router bundling layers "SSR rendering" and "browser" layer, which are used for server side rendering and client, we should still apply the module resolving rules to all assets since we bundled everything, removed the default exclude conditions as they'll not apply the rules to node_modules. That could cause the mismatch resolving for package.

E.g. You have two dual packages A and B are both compatible for ESM and CJS, and both have default export. B is depent on A, but when you import B in a client component that will be SSR'd, it's picking up the CJS asset like the case described in #57584 .

Fixes #57584 
Closes NEXT-1702

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"
+  }
+}