refactor main field resolver

vercel · Oct 6, 2023 · d3fe59d · d3fe59d
1 parent 181ef22
commit d3fe59d
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 20 deletions.
diff --git a/packages/next/src/build/webpack-config-rules/resolve.ts b/packages/next/src/build/webpack-config-rules/resolve.ts
@@ -0,0 +1,37 @@
+import { COMPILER_NAMES, CompilerNameValues } from '../../shared/lib/constants'
+
+// exports.<conditionName>
+export const edgeConditionNames = [
+  'edge-light',
+  'worker',
+  // inherits the default conditions
+  '...',
+]
+
+const mainFieldsPerCompiler: Record<
+  CompilerNameValues | 'app-router-server',
+  string[]
+> = {
+  // For default case, prefer CJS over ESM on server side. e.g. pages dir SSR
+  [COMPILER_NAMES.server]: ['main', 'module'],
+  [COMPILER_NAMES.client]: ['browser', 'module', 'main'],
+  [COMPILER_NAMES.edgeServer]: edgeConditionNames,
+  // For app router since everything is bundled, prefer ESM over CJS
+  ['app-router-server']: ['module', 'main'],
+}
+
+export function getMainField(
+  pageType: 'app' | 'pages',
+  compilerType: CompilerNameValues
+) {
+  if (compilerType === COMPILER_NAMES.edgeServer) {
+    return edgeConditionNames
+  } else if (compilerType === COMPILER_NAMES.client) {
+    return mainFieldsPerCompiler[COMPILER_NAMES.client]
+  }
+
+  // Prefer module fields over main fields for isomorphic packages on server layer
+  return pageType === 'app'
+    ? mainFieldsPerCompiler['app-router-server']
+    : mainFieldsPerCompiler[COMPILER_NAMES.server]
+}
diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
@@ -74,6 +74,10 @@ import { needsExperimentalReact } from '../lib/needs-experimental-react'
 import { getDefineEnvPlugin } from './webpack/plugins/define-env-plugin'
 import { SWCLoaderOptions } from './webpack/loaders/next-swc-loader'
 import { isResourceInPackages, makeExternalHandler } from './handle-externals'
+import {
+  getMainField,
+  edgeConditionNames,
+} from './webpack-config-rules/resolve'
 
 type ExcludesFalse = <T>(x: T | false) => x is T
 type ClientEntries = {
@@ -104,21 +108,6 @@ const babelIncludeRegexes: RegExp[] = [
 const asyncStoragesRegex =
   /next[\\/]dist[\\/](esm[\\/])?client[\\/]components[\\/](static-generation-async-storage|action-async-storage|request-async-storage)/
 
-// exports.<conditionName>
-const edgeConditionNames = [
-  'edge-light',
-  'worker',
-  // inherits the default conditions
-  '...',
-]
-
-// packageJson.<mainField>
-const mainFieldsPerCompiler: Record<CompilerNameValues, string[]> = {
-  [COMPILER_NAMES.server]: ['main', 'module'],
-  [COMPILER_NAMES.client]: ['browser', 'module', 'main'],
-  [COMPILER_NAMES.edgeServer]: edgeConditionNames,
-}
-
 // Support for NODE_PATH
 const nodePathList = (process.env.NODE_PATH || '')
   .split(process.platform === 'win32' ? ';' : ':')
@@ -918,7 +907,8 @@ export default async function getBaseWebpackConfig(
           },
         }
       : undefined),
-    mainFields: mainFieldsPerCompiler[compilerType],
+    // default main fields use pages dir ones, and customize app router ones in loaders.
+    mainFields: getMainField('pages', compilerType),
     ...(isEdgeServer && {
       conditionNames: edgeConditionNames,
     }),
@@ -1614,10 +1604,7 @@ export default async function getBaseWebpackConfig(
                   ],
                 },
                 resolve: {
-                  mainFields: isEdgeServer
-                    ? mainFieldsPerCompiler[COMPILER_NAMES.edgeServer]
-                    : // Prefer module fields over main fields for isomorphic packages on server layer
-                      ['module', 'main'],
+                  mainFields: getMainField('app', 'server'),
                   conditionNames: reactServerCondition,
                   // If missing the alias override here, the default alias will be used which aliases
                   // react to the direct file path, not the package name. In that case the condition
@@ -1762,6 +1749,9 @@ export default async function getBaseWebpackConfig(
                     ],
                     exclude: [codeCondition.exclude],
                     use: swcLoaderForClientLayer,
+                    resolve: {
+                      mainFields: getMainField('app', 'server'),
+                    },
                   },
                 ]
               : []),