Fix next/server apit push alias for ESM pkg (#61721)

We have a modularize imports config for `next/server` before, which will
transform the `next/server` imports to directly import from the actual
file, for instance: `import { NextRequest } from 'next/server'` will
become `import { NextRequest } from
'next/dist/server/web/exports/next-request'`, where the NextRequest is
exported as default export. This is fine in most case until you're using
a ESM pkg, then it will be resolved as `{ default: NextRequest }`
according to the spec. Since it's a ESM import to a CJS module in
`next/dist`.

Since we already have the ESM alias introduced in #59852 , this can
handle the case more properly.

Remove the modularize imports config for `next/server`, use the ESM api
alias instead.

Migrate the cjs optimizer tests from middleware to a separate endpoint
`/cjs/server`. As now ESM imports for next/server are not going to get
tree-shaken in dev, but since we don't have image response there it's
still fine.

Closes NEXT-2376
Closes NEXT-2374

packages/next/server.js

@@ -9,11 +9,8 @@ const serverExports = {
     .userAgentFromString,
   userAgent: require('next/dist/server/web/spec-extension/user-agent')
     .userAgent,
-}
-
-if (typeof URLPattern !== 'undefined') {
-  // eslint-disable-next-line no-undef
-  serverExports.URLPattern = URLPattern
+  URLPattern: require('next/dist/server/web/spec-extension/url-pattern')
+    .URLPattern,
 }
 
 // https://nodejs.org/api/esm.html#commonjs-namespaces

packages/next/src/build/create-compiler-aliases.ts

@@ -205,6 +205,7 @@ export function createNextApiEsmAliases() {
     navigation: 'next/dist/api/navigation',
     headers: 'next/dist/api/headers',
     og: 'next/dist/api/og',
+    server: 'next/dist/api/server',
     // pages api
     document: 'next/dist/api/document',
     app: 'next/dist/api/app',

packages/next/src/server/config.ts

@@ -831,9 +831,6 @@ function assignDefaults(
     lodash: {
       transform: 'lodash/{{member}}',
     },
-    'next/server': {
-      transform: 'next/dist/server/web/exports/{{ kebabCase member }}',
-    },
   }
 
   const userProvidedOptimizePackageImports =

packages/next/src/server/web/exports/index.ts

@@ -1,8 +1,7 @@
 // Alias index file of next/server for edge runtime for tree-shaking purpose
 
-export { default as ImageResponse } from './image-response'
-export { default as NextRequest } from './next-request'
-export { default as NextResponse } from './next-response'
-export { default as userAgent } from './user-agent'
-export { default as userAgentFromString } from './user-agent-from-string'
-export { default as URLPattern } from './url-pattern'
+export { ImageResponse } from '../spec-extension/image-response'
+export { NextRequest } from '../spec-extension/request'
+export { NextResponse } from '../spec-extension/response'
+export { userAgent, userAgentFromString } from '../spec-extension/user-agent'
+export { URLPattern } from '../spec-extension/url-pattern'

packages/next/src/server/web/exports/url-pattern.ts → packages/next/src/server/web/spec-extension/url-pattern.ts

@@ -2,4 +2,4 @@ const GlobalURLPattern =
   // @ts-expect-error: URLPattern is not available in Node.js
   typeof URLPattern === 'undefined' ? undefined : URLPattern
 
-export default GlobalURLPattern
+export { GlobalURLPattern as URLPattern }

test/e2e/app-dir/app-external/app-external.test.ts

@@ -264,11 +264,13 @@ createNextDescribe(
     })
 
     it('should have proper tree-shaking for known modules in CJS', async () => {
-      const html = await next.render('/test-middleware')
-      expect(html).toContain('it works')
+      const html = await next.render('/cjs/server')
+      expect(html).toContain('resolve response')
 
-      const middlewareBundle = await next.readFile('.next/server/middleware.js')
-      expect(middlewareBundle).not.toContain('image-response')
+      const outputFile = await next.readFile(
+        '.next/server/app/cjs/server/page.js'
+      )
+      expect(outputFile).not.toContain('image-response')
     })
 
     it('should use the same async storages if imported directly', async () => {
@@ -301,5 +303,14 @@ createNextDescribe(
         }, /success/)
       })
     })
+
+    describe('app route', () => {
+      it('should resolve next/server api from external esm package', async () => {
+        const res = await next.fetch('/app-routes')
+        const text = await res.text()
+        expect(res.status).toBe(200)
+        expect(text).toBe('get route')
+      })
+    })
   }
 )

test/e2e/app-dir/app-external/app/app-routes/route.js

@@ -0,0 +1,6 @@
+import { serverApi } from 'server-api-esm'
+
+export function GET(req) {
+  serverApi(req)
+  return new Response('get route')
+}

test/e2e/app-dir/app-external/app/cjs/server/page.js

@@ -0,0 +1,7 @@
+import { createResponse } from 'next-server-cjs-lib'
+
+export default async function Page() {
+  const response = createResponse('resolve response')
+  const text = await response.text()
+  return <p>{text}</p>
+}

test/e2e/app-dir/app-external/middleware.js

@@ -1,10 +1,5 @@
-import { createResponse } from 'next-server-cjs-lib'
 import { respond } from 'compat-next-server-module'
 
 export async function middleware(request) {
-  if (request.nextUrl.pathname === '/test-middleware') {
-    return createResponse('it works')
-  }
-
   return await respond()
 }

test/e2e/app-dir/app-external/node_modules_bak/server-api-esm/index.js

@@ -0,0 +1,5 @@
+import { NextRequest } from 'next/server'
+
+export function serverApi(req) {
+  return new NextRequest(req)
+}

test/e2e/app-dir/app-external/node_modules_bak/server-api-esm/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "server-api-module",
+  "type": "module",
+  "exports": "./index.js"
+}