fix: concatenate all edge chunks (#319)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: ascorbic

src/build/functions/edge.ts

@@ -1,5 +1,5 @@
 import { cp, mkdir, readFile, rm, writeFile } from 'node:fs/promises'
-import { dirname, join, relative } from 'node:path'
+import { dirname, join } from 'node:path'
 
 import { glob } from 'fast-glob'
 import type { EdgeFunctionDefinition as NextDefinition } from 'next/dist/build/webpack/plugins/middleware-plugin.js'
@@ -116,44 +116,34 @@ const copyHandlerDependencies = async (
   const srcDir = join(ctx.standaloneDir, ctx.nextDistDir)
   const destDir = join(ctx.edgeFunctionsDir, getHandlerName({ name }))
 
-  await Promise.all(
-    files.map(async (file) => {
-      if (file === `server/${name}.js`) {
-        const edgeRuntimeDir = join(ctx.pluginDir, 'edge-runtime')
-        const shimPath = join(edgeRuntimeDir, 'shim/index.js')
-        const shim = await readFile(shimPath, 'utf8')
-
-        const importsDir = relative(dirname(join(srcDir, file)), join(srcDir, 'server'))
-        const importsSrc = `${importsDir || '.'}/edge-runtime-webpack.js`
-        const imports = `import '${importsSrc}';`
-
-        const exports = `export default _ENTRIES["middleware_${name}"].default;`
-
-        const parts = [shim, imports]
-
-        if (wasm?.length) {
-          parts.push(
-            `import { decode as _base64Decode } from "../edge-runtime/vendor/deno.land/std@0.175.0/encoding/base64.ts";`,
-          )
-          for (const wasmChunk of wasm ?? []) {
-            const data = await readFile(join(srcDir, wasmChunk.filePath))
-            parts.push(
-              `const ${wasmChunk.name} = _base64Decode(${JSON.stringify(
-                data.toString('base64'),
-              )}).buffer`,
-            )
-          }
-        }
-
-        const entrypoint = await readFile(join(srcDir, file), 'utf8')
-
-        await mkdir(dirname(join(destDir, file)), { recursive: true })
-        await writeFile(join(destDir, file), [...parts, entrypoint, exports].join('\n;'))
-      } else {
-        await cp(join(srcDir, file), join(destDir, file))
-      }
-    }),
-  )
+  const edgeRuntimeDir = join(ctx.pluginDir, 'edge-runtime')
+  const shimPath = join(edgeRuntimeDir, 'shim/index.js')
+  const shim = await readFile(shimPath, 'utf8')
+
+  const parts = [shim]
+
+  if (wasm?.length) {
+    parts.push(
+      `import { decode as _base64Decode } from "../edge-runtime/vendor/deno.land/std@0.175.0/encoding/base64.ts";`,
+    )
+    for (const wasmChunk of wasm ?? []) {
+      const data = await readFile(join(srcDir, wasmChunk.filePath))
+      parts.push(
+        `const ${wasmChunk.name} = _base64Decode(${JSON.stringify(
+          data.toString('base64'),
+        )}).buffer`,
+      )
+    }
+  }
+
+  for (const file of files) {
+    const entrypoint = await readFile(join(srcDir, file), 'utf8')
+    parts.push(`;// Concatenated file: ${file} \n`, entrypoint)
+  }
+  const exports = `export default _ENTRIES["middleware_${name}"].default;`
+  await mkdir(dirname(join(destDir, `server/${name}.js`)), { recursive: true })
+
+  await writeFile(join(destDir, `server/${name}.js`), [...parts, exports].join('\n'))
 }
 
 const createEdgeHandler = async (ctx: PluginContext, definition: NextDefinition): Promise<void> => {

tests/fixtures/middleware-pages/package-lock.json

@@ -8,7 +8,7 @@
     "build": "next build"
   },
   "dependencies": {
-    "next": "^14.0.4",
+    "next": "^14.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

tests/fixtures/middleware-pages/package.json

@@ -0,0 +1,9 @@
+export const runtime = 'edge'
+
+export default (req) => {
+  return Response.json(Object.fromEntries(req.headers.entries()), {
+    headers: {
+      'headers-from-edge-function': '1',
+    },
+  })
+}

tests/fixtures/middleware-pages/pages/api/edge-headers.js

@@ -1,3 +1,4 @@
 export default function handler(req, res) {
+  res.headers = { 'headers-from-function': '1' }
   res.json({ url: req.url, headers: req.headers })
 }

tests/fixtures/middleware-pages/pages/api/headers.js

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@aws-amplify/adapter-nextjs": "^1.0.13",
-    "next": "^14.0.4",
+    "next": "^14.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   }

tests/fixtures/middleware/package-lock.json

@@ -19,63 +19,69 @@ beforeEach<FixtureTestContext>(async (ctx) => {
   await startMockBlobStore(ctx)
 })
 
-test.skipIf(platform === "win32")<FixtureTestContext>('should add request/response headers', async (ctx) => {
-  await createFixture('middleware', ctx)
-  await runPlugin(ctx)
+test.skipIf(platform === 'win32')<FixtureTestContext>(
+  'should add request/response headers',
+  async (ctx) => {
+    await createFixture('middleware', ctx)
+    await runPlugin(ctx)
 
-  const origin = await LocalServer.run(async (req, res) => {
-    expect(req.url).toBe('/test/next')
-    expect(req.headers['x-hello-from-middleware-req']).toBe('hello')
+    const origin = await LocalServer.run(async (req, res) => {
+      expect(req.url).toBe('/test/next')
+      expect(req.headers['x-hello-from-middleware-req']).toBe('hello')
 
-    res.write('Hello from origin!')
-    res.end()
-  })
+      res.write('Hello from origin!')
+      res.end()
+    })
 
-  ctx.cleanup?.push(() => origin.stop())
+    ctx.cleanup?.push(() => origin.stop())
 
-  const response = await invokeEdgeFunction(ctx, {
-    functions: ['___netlify-edge-handler-middleware'],
-    origin,
-    url: '/test/next',
-  })
+    const response = await invokeEdgeFunction(ctx, {
+      functions: ['___netlify-edge-handler-middleware'],
+      origin,
+      url: '/test/next',
+    })
 
-  expect(await response.text()).toBe('Hello from origin!')
-  expect(response.status).toBe(200)
-  expect(response.headers.get('x-hello-from-middleware-res'), 'added a response header').toEqual(
-    'hello',
-  )
-  expect(origin.calls).toBe(1)
-})
+    expect(await response.text()).toBe('Hello from origin!')
+    expect(response.status).toBe(200)
+    expect(response.headers.get('x-hello-from-middleware-res'), 'added a response header').toEqual(
+      'hello',
+    )
+    expect(origin.calls).toBe(1)
+  },
+)
 
-test.skipIf(platform === "win32")<FixtureTestContext>('should add request/response headers when using src dir', async (ctx) => {
-  await createFixture('middleware-src', ctx)
-  await runPlugin(ctx)
+test.skipIf(platform === 'win32')<FixtureTestContext>(
+  'should add request/response headers when using src dir',
+  async (ctx) => {
+    await createFixture('middleware-src', ctx)
+    await runPlugin(ctx)
 
-  const origin = await LocalServer.run(async (req, res) => {
-    expect(req.url).toBe('/test/next')
-    expect(req.headers['x-hello-from-middleware-req']).toBe('hello')
+    const origin = await LocalServer.run(async (req, res) => {
+      expect(req.url).toBe('/test/next')
+      expect(req.headers['x-hello-from-middleware-req']).toBe('hello')
 
-    res.write('Hello from origin!')
-    res.end()
-  })
+      res.write('Hello from origin!')
+      res.end()
+    })
 
-  ctx.cleanup?.push(() => origin.stop())
+    ctx.cleanup?.push(() => origin.stop())
 
-  const response = await invokeEdgeFunction(ctx, {
-    functions: ['___netlify-edge-handler-src-middleware'],
-    origin,
-    url: '/test/next',
-  })
+    const response = await invokeEdgeFunction(ctx, {
+      functions: ['___netlify-edge-handler-src-middleware'],
+      origin,
+      url: '/test/next',
+    })
 
-  expect(await response.text()).toBe('Hello from origin!')
-  expect(response.status).toBe(200)
-  expect(response.headers.get('x-hello-from-middleware-res'), 'added a response header').toEqual(
-    'hello',
-  )
-  expect(origin.calls).toBe(1)
-})
+    expect(await response.text()).toBe('Hello from origin!')
+    expect(response.status).toBe(200)
+    expect(response.headers.get('x-hello-from-middleware-res'), 'added a response header').toEqual(
+      'hello',
+    )
+    expect(origin.calls).toBe(1)
+  },
+)
 
-describe.skipIf(platform === "win32")('redirect', () => {
+describe.skipIf(platform === 'win32')('redirect', () => {
   test<FixtureTestContext>('should return a redirect response', async (ctx) => {
     await createFixture('middleware', ctx)
     await runPlugin(ctx)
@@ -124,7 +130,7 @@ describe.skipIf(platform === "win32")('redirect', () => {
   })
 })
 
-describe.skipIf(platform === "win32")('rewrite', () => {
+describe.skipIf(platform === 'win32')('rewrite', () => {
   test<FixtureTestContext>('should rewrite to an external URL', async (ctx) => {
     await createFixture('middleware', ctx)
     await runPlugin(ctx)
@@ -184,116 +190,122 @@ describe.skipIf(platform === "win32")('rewrite', () => {
   })
 })
 
-describe.skipIf(platform === "win32")("aborts middleware execution when the matcher conditions don't match the request", () => {
-  test<FixtureTestContext>('when the path is excluded', async (ctx) => {
-    await createFixture('middleware', ctx)
-    await runPlugin(ctx)
+describe.skipIf(platform === 'win32')(
+  "aborts middleware execution when the matcher conditions don't match the request",
+  () => {
+    test<FixtureTestContext>('when the path is excluded', async (ctx) => {
+      await createFixture('middleware', ctx)
+      await runPlugin(ctx)
 
-    const origin = await LocalServer.run(async (req, res) => {
-      expect(req.url).toBe('/_next/data')
-      expect(req.headers['x-hello-from-middleware-req']).toBeUndefined()
+      const origin = await LocalServer.run(async (req, res) => {
+        expect(req.url).toBe('/_next/data')
+        expect(req.headers['x-hello-from-middleware-req']).toBeUndefined()
 
-      res.write('Hello from origin!')
-      res.end()
-    })
-
-    ctx.cleanup?.push(() => origin.stop())
-
-    const response = await invokeEdgeFunction(ctx, {
-      functions: ['___netlify-edge-handler-middleware'],
-      origin,
-      url: '/_next/data',
-    })
-
-    expect(await response.text()).toBe('Hello from origin!')
-    expect(response.status).toBe(200)
-    expect(response.headers.has('x-hello-from-middleware-res')).toBeFalsy()
-    expect(origin.calls).toBe(1)
-  })
+        res.write('Hello from origin!')
+        res.end()
+      })
 
-  test<FixtureTestContext>('when a request header matches a condition', async (ctx) => {
-    await createFixture('middleware-conditions', ctx)
-    await runPlugin(ctx)
+      ctx.cleanup?.push(() => origin.stop())
 
-    const origin = await LocalServer.run(async (req, res) => {
-      expect(req.url).toBe('/foo')
-      expect(req.headers['x-hello-from-middleware-req']).toBeUndefined()
+      const response = await invokeEdgeFunction(ctx, {
+        functions: ['___netlify-edge-handler-middleware'],
+        origin,
+        url: '/_next/data',
+      })
 
-      res.write('Hello from origin!')
-      res.end()
+      expect(await response.text()).toBe('Hello from origin!')
+      expect(response.status).toBe(200)
+      expect(response.headers.has('x-hello-from-middleware-res')).toBeFalsy()
+      expect(origin.calls).toBe(1)
     })
 
-    ctx.cleanup?.push(() => origin.stop())
+    test<FixtureTestContext>('when a request header matches a condition', async (ctx) => {
+      await createFixture('middleware-conditions', ctx)
+      await runPlugin(ctx)
 
-    // Request 1: Middleware should run because we're not sending the header.
-    const response1 = await invokeEdgeFunction(ctx, {
-      functions: ['___netlify-edge-handler-middleware'],
-      origin,
-      url: '/foo',
-    })
+      const origin = await LocalServer.run(async (req, res) => {
+        expect(req.url).toBe('/foo')
+        expect(req.headers['x-hello-from-middleware-req']).toBeUndefined()
 
-    expect(await response1.text()).toBe('Hello from origin!')
-    expect(response1.status).toBe(200)
-    expect(response1.headers.has('x-hello-from-middleware-res')).toBeTruthy()
-    expect(origin.calls).toBe(1)
+        res.write('Hello from origin!')
+        res.end()
+      })
 
-    // Request 2: Middleware should not run because we're sending the header.
-    const response2 = await invokeEdgeFunction(ctx, {
-      headers: {
-        'x-custom-header': 'custom-value',
-      },
-      functions: ['___netlify-edge-handler-middleware'],
-      origin,
-      url: '/foo',
-    })
+      ctx.cleanup?.push(() => origin.stop())
 
-    expect(await response2.text()).toBe('Hello from origin!')
-    expect(response2.status).toBe(200)
-    expect(response2.headers.has('x-hello-from-middleware-res')).toBeFalsy()
-    expect(origin.calls).toBe(2)
-  })
+      // Request 1: Middleware should run because we're not sending the header.
+      const response1 = await invokeEdgeFunction(ctx, {
+        functions: ['___netlify-edge-handler-middleware'],
+        origin,
+        url: '/foo',
+      })
 
-  test<FixtureTestContext>('should handle locale matching correctly', async (ctx) => {
-    await createFixture('middleware-conditions', ctx)
-    await runPlugin(ctx)
+      expect(await response1.text()).toBe('Hello from origin!')
+      expect(response1.status).toBe(200)
+      expect(response1.headers.has('x-hello-from-middleware-res')).toBeTruthy()
+      expect(origin.calls).toBe(1)
 
-    const origin = await LocalServer.run(async (req, res) => {
-      expect(req.headers['x-hello-from-middleware-req']).toBeUndefined()
+      // Request 2: Middleware should not run because we're sending the header.
+      const response2 = await invokeEdgeFunction(ctx, {
+        headers: {
+          'x-custom-header': 'custom-value',
+        },
+        functions: ['___netlify-edge-handler-middleware'],
+        origin,
+        url: '/foo',
+      })
 
-      res.write('Hello from origin!')
-      res.end()
+      expect(await response2.text()).toBe('Hello from origin!')
+      expect(response2.status).toBe(200)
+      expect(response2.headers.has('x-hello-from-middleware-res')).toBeFalsy()
+      expect(origin.calls).toBe(2)
     })
 
-    ctx.cleanup?.push(() => origin.stop())
+    test<FixtureTestContext>('should handle locale matching correctly', async (ctx) => {
+      await createFixture('middleware-conditions', ctx)
+      await runPlugin(ctx)
 
-    for (const path of ['/hello', '/en/hello', '/nl-NL/hello', '/nl-NL/about']) {
-      const response = await invokeEdgeFunction(ctx, {
-        functions: ['___netlify-edge-handler-middleware'],
-        origin,
-        url: path,
-      })
-      expect(response.headers.has('x-hello-from-middleware-res'), `does match ${path}`).toBeTruthy()
-      expect(await response.text()).toBe('Hello from origin!')
-      expect(response.status).toBe(200)
-    }
+      const origin = await LocalServer.run(async (req, res) => {
+        expect(req.headers['x-hello-from-middleware-req']).toBeUndefined()
 
-    for (const path of ['/hello/invalid', '/about', '/en/about']) {
-      const response = await invokeEdgeFunction(ctx, {
-        functions: ['___netlify-edge-handler-middleware'],
-        origin,
-        url: path,
+        res.write('Hello from origin!')
+        res.end()
       })
-      expect(
-        response.headers.has('x-hello-from-middleware-res'),
-        `does not match ${path}`,
-      ).toBeFalsy()
-      expect(await response.text()).toBe('Hello from origin!')
-      expect(response.status).toBe(200)
-    }
-  })
-})
 
-describe.skipIf(platform === "win32")('should run middleware on data requests', () => {
+      ctx.cleanup?.push(() => origin.stop())
+
+      for (const path of ['/hello', '/en/hello', '/nl-NL/hello', '/nl-NL/about']) {
+        const response = await invokeEdgeFunction(ctx, {
+          functions: ['___netlify-edge-handler-middleware'],
+          origin,
+          url: path,
+        })
+        expect(
+          response.headers.has('x-hello-from-middleware-res'),
+          `does match ${path}`,
+        ).toBeTruthy()
+        expect(await response.text()).toBe('Hello from origin!')
+        expect(response.status).toBe(200)
+      }
+
+      for (const path of ['/hello/invalid', '/about', '/en/about']) {
+        const response = await invokeEdgeFunction(ctx, {
+          functions: ['___netlify-edge-handler-middleware'],
+          origin,
+          url: path,
+        })
+        expect(
+          response.headers.has('x-hello-from-middleware-res'),
+          `does not match ${path}`,
+        ).toBeFalsy()
+        expect(await response.text()).toBe('Hello from origin!')
+        expect(response.status).toBe(200)
+      }
+    })
+  },
+)
+
+describe.skipIf(platform === 'win32')('should run middleware on data requests', () => {
   test<FixtureTestContext>('when `trailingSlash: false`', async (ctx) => {
     await createFixture('middleware', ctx)
     await runPlugin(ctx)
@@ -344,6 +356,28 @@ describe.skipIf(platform === "win32")('should run middleware on data requests',
 })
 
 describe('page router', () => {
+  test<FixtureTestContext>('edge api routes should work with middleware', async (ctx) => {
+    await createFixture('middleware-pages', ctx)
+    await runPlugin(ctx)
+    const origin = await LocalServer.run(async (req, res) => {
+      res.write(
+        JSON.stringify({
+          url: req.url,
+          headers: req.headers,
+        }),
+      )
+      res.end()
+    })
+    ctx.cleanup?.push(() => origin.stop())
+    const response = await invokeEdgeFunction(ctx, {
+      functions: ['___netlify-edge-handler-middleware'],
+      origin,
+      url: `/api/edge-headers`,
+    })
+    const res = await response.json()
+    expect(res.url).toBe('/api/edge-headers')
+    expect(response.status).toBe(200)
+  })
   test<FixtureTestContext>('middleware should rewrite data requests', async (ctx) => {
     await createFixture('middleware-pages', ctx)
     await runPlugin(ctx)