fix: middleware should run in/out of src dir (#219)

* chore: add middleware-src fixture

* fix: ensure relative import for edge-runtime-webpack file

* chore: test middleware in src dir

* fix: middleware function name

* fix: middleware bundle resolution for non-src builds

* chore: fix function name in test

* fix: middleware bundle import separator

* chore: move turborepo fixture into src and add middleware

* chore: update turborepo test to check for middleware headers

Author: orinokai

src/build/functions/edge.ts

@@ -1,5 +1,5 @@
 import { cp, mkdir, readFile, rm, writeFile } from 'node:fs/promises'
-import { dirname, join } from 'node:path'
+import { dirname, join, relative } from 'node:path'
 
 import { glob } from 'fast-glob'
 import type { EdgeFunctionDefinition as NextDefinition } from 'next/dist/build/webpack/plugins/middleware-plugin.js'
@@ -81,42 +81,45 @@ const copyHandlerDependencies = async (
   ctx: PluginContext,
   { name, files, wasm }: NextDefinition,
 ) => {
-  const edgeRuntimePath = join(ctx.pluginDir, 'edge-runtime')
   const srcDir = join(ctx.standaloneDir, '.next')
-  const shimPath = join(edgeRuntimePath, 'shim/index.js')
-  const shim = await readFile(shimPath, 'utf8')
-  const imports = `import './edge-runtime-webpack.js';`
-  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/[email protected]/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 destDir = join(ctx.edgeFunctionsDir, getHandlerName({ name }))
 
   await Promise.all(
     files.map(async (file) => {
-      const destDir = join(ctx.edgeFunctionsDir, getHandlerName({ name }))
-
       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/[email protected]/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;'))
-
-        return
+      } else {
+        await cp(join(srcDir, file), join(destDir, file))
       }
-
-      await cp(join(srcDir, file), join(destDir, file))
     }),
   )
 }
@@ -134,9 +137,10 @@ const buildHandlerDefinition = (
   { name, matchers, page }: NextDefinition,
 ): Array<NetlifyDefinition> => {
   const fun = getHandlerName({ name })
-  const funName =
-    name === 'middleware' ? 'Next.js Middleware Handler' : `Next.js Edge Handler: ${page}`
-  const cache = name === 'middleware' ? undefined : 'manual'
+  const funName = name.endsWith('middleware')
+    ? 'Next.js Middleware Handler'
+    : `Next.js Edge Handler: ${page}`
+  const cache = name.endsWith('middleware') ? undefined : 'manual'
   const generator = `${ctx.pluginName}@${ctx.pluginVersion}`
   return matchers.map((matcher) => ({
     function: fun,

tests/e2e/turborepo.test.ts

@@ -50,6 +50,7 @@ test.describe('[PNPM] Package manager', () => {
     const headers1 = response1?.headers() || {}
     expect(response1?.status()).toBe(200)
     expect(headers1['x-nextjs-cache']).toBeUndefined()
+    expect(headers1['x-hello-from-middleware-res']).toBe('hello')
     // first time hitting this route - we will invoke function and see
     // Next cache hit status in the response because it was prerendered
     // at build time

tests/fixtures/middleware-src/next.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}
+
+module.exports = nextConfig