diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index dd7c52955acca..4a93193dd5650 100644
--- a/packages/next/src/build/webpack-config.ts
+++ b/packages/next/src/build/webpack-config.ts
@@ -1941,6 +1941,10 @@ 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'],
conditionNames: reactServerCondition,
alias: {
// If missing the alias override here, the default alias will be used which aliases
diff --git a/test/e2e/app-dir/app-external/app-external.test.ts b/test/e2e/app-dir/app-external/app-external.test.ts
index f76b8a9b43221..ea2a4f5d39263 100644
--- a/test/e2e/app-dir/app-external/app-external.test.ts
+++ b/test/e2e/app-dir/app-external/app-external.test.ts
@@ -88,24 +88,23 @@ createNextDescribe(
})
it('should resolve 3rd party package exports based on the react-server condition', async () => {
- await next
- .fetch('/react-server/3rd-party-package')
- .then(async (response) => {
- const result = await resolveStreamResponse(response)
-
- // Package should be resolved based on the react-server condition,
- // as well as package's internal & external dependencies.
- expect(result).toContain(
- 'Server: index.react-server:react.subset:dep.server'
- )
- expect(result).toContain(
- 'Client: index.default:react.full:dep.default'
- )
+ const $ = await next.render$('/react-server/3rd-party-package')
+
+ const result = $('body').text()
+
+ // Package should be resolved based on the react-server condition,
+ // as well as package's internal & external dependencies.
+ expect(result).toContain(
+ 'Server: index.react-server:react.subset:dep.server'
+ )
+ expect(result).toContain('Client: index.default:react.full:dep.default')
+
+ // Subpath exports should be resolved based on the condition too.
+ expect(result).toContain('Server subpath: subpath.react-server')
+ expect(result).toContain('Client subpath: subpath.default')
- // Subpath exports should be resolved based on the condition too.
- expect(result).toContain('Server subpath: subpath.react-server')
- expect(result).toContain('Client subpath: subpath.default')
- })
+ // Prefer `module` field for isomorphic packages.
+ expect($('#main-field').text()).toContain('server-module-field:module')
})
it('should correctly collect global css imports and mark them as side effects', async () => {
diff --git a/test/e2e/app-dir/app-external/app/react-server/3rd-party-package/page.js b/test/e2e/app-dir/app-external/app/react-server/3rd-party-package/page.js
index 33141e12f7685..92e9f01672faa 100644
--- a/test/e2e/app-dir/app-external/app/react-server/3rd-party-package/page.js
+++ b/test/e2e/app-dir/app-external/app/react-server/3rd-party-package/page.js
@@ -1,5 +1,6 @@
import v from 'conditional-exports'
import v1 from 'conditional-exports/subpath'
+import { name as serverFieldName } from 'server-module-field'
import Client from './client'
@@ -11,6 +12,8 @@ export default function Page() {
{`Server subpath: ${v1}`}
+