[edge] favor browser exports for edge compiler (#38319)

this is a regression from the previous implementation where Next.js compiled Middleware using
the client compiler. We used to favor the browser exports over the `module` and `main`,
which allowed packages like `debug` to work without any changes on Edge Functions. This is
no longer the case, and this commit fixes that.

Side note: I believe that in the future we will also have a different key to symbolize edge
deployments. Maybe it will be `winter` to refer to WinterCG, but only time will tell!

Another side note: we need to add support for import maps for advanced use cases.

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

packages/next/build/webpack-config.ts

@@ -630,6 +630,12 @@ export default async function getBaseWebpackConfig(
   const reactDir = dirname(require.resolve('react/package.json'))
   const reactDomDir = dirname(require.resolve('react-dom/package.json'))
 
+  const mainFieldsPerCompiler: Record<typeof compilerType, string[]> = {
+    server: ['main', 'module'],
+    client: ['browser', 'module', 'main'],
+    'edge-server': ['browser', 'module', 'main'],
+  }
+
   const resolveConfig = {
     // Disable .mjs for node_modules bundling
     extensions: isNodeServer
@@ -700,11 +706,7 @@ export default async function getBaseWebpackConfig(
           },
         }
       : undefined),
-    mainFields: isClient
-      ? ['browser', 'module', 'main']
-      : isEdgeServer
-      ? ['module', 'main']
-      : ['main', 'module'],
+    mainFields: mainFieldsPerCompiler[compilerType],
     plugins: [],
   }
 

test/e2e/edge-compiler-module-exports-preference/index.test.ts

@@ -0,0 +1,48 @@
+import { createNext } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { fetchViaHTTP } from 'next-test-utils'
+
+describe('Edge compiler module exports preference', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        'pages/index.js': `
+          export default function Page() {
+            return <p>hello world</p>
+          }
+        `,
+        'middleware.js': `
+          import { NextResponse } from 'next/server';
+          import lib from 'my-lib';
+
+          export default (req) => {
+            return NextResponse.next({
+              headers: {
+                'x-imported': lib
+              }
+            })
+          }
+        `,
+        'node_modules/my-lib/package.json': JSON.stringify({
+          name: 'my-lib',
+          version: '1.0.0',
+          main: 'index.js',
+          browser: 'browser.js',
+        }),
+        'node_modules/my-lib/index.js': `module.exports = "Node.js"`,
+        'node_modules/my-lib/browser.js': `module.exports = "Browser"`,
+      },
+      dependencies: {},
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('favors the browser export', async () => {
+    const response = await fetchViaHTTP(next.url, '/')
+    expect(Object.fromEntries(response.headers)).toMatchObject({
+      'x-imported': 'Browser',
+    })
+  })
+})