diff --git a/packages/next/src/build/handle-externals.ts b/packages/next/src/build/handle-externals.ts
index a52f9dea1a0219..d45bec5b2a3952 100644
--- a/packages/next/src/build/handle-externals.ts
+++ b/packages/next/src/build/handle-externals.ts
@@ -65,11 +65,7 @@ export async function resolveExternal(
 
   let preferEsmOptions =
     esmExternals && isEsmRequested ? [true, false] : [false]
-  // Disable esm resolving for app/ and pages/ so for esm package using under pages/
-  // won't load react through esm loader
-  if (hasAppDir) {
-    preferEsmOptions = [false]
-  }
+
   for (const preferEsm of preferEsmOptions) {
     const resolve = getResolve(
       preferEsm ? esmResolveOptions : nodeResolveOptions
diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index 5b802b6cdca5ef..5d3fbc33c0d5b9 100644
--- a/packages/next/src/build/webpack-config.ts
+++ b/packages/next/src/build/webpack-config.ts
@@ -1604,7 +1604,7 @@ export default async function getBaseWebpackConfig(
                   ],
                 },
                 resolve: {
-                  mainFields: getMainField('app', 'server'),
+                  mainFields: getMainField('app', compilerType),
                   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
@@ -1750,7 +1750,7 @@ export default async function getBaseWebpackConfig(
                     exclude: [codeCondition.exclude],
                     use: swcLoaderForClientLayer,
                     resolve: {
-                      mainFields: getMainField('app', 'server'),
+                      mainFields: getMainField('app', compilerType),
                     },
                   },
                 ]