fix: ensure newly-created middleware works (#1558)

* fix: ensure newly-created midldeware works

* fix: set output format for middleware

* fix: compile js and ts separately

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

Author: ascorbic

packages/runtime/src/helpers/dev.ts

@@ -27,17 +27,14 @@ export const onPreDev: OnPreBuild = async ({ constants, netlifyConfig }) => {
     console.log('Watching for changes in Next.js middleware...')
   }
   // Eventually we might want to do this via esbuild's API, but for now the CLI works fine
-  const childProcess = execa(`esbuild`, [
-    `--bundle`,
-    `--outdir=${resolve('.netlify')}`,
-    `--format=esm`,
-    '--watch',
-    // Watch for both, because it can have either ts or js
-    resolve(base, 'middleware.ts'),
-    resolve(base, 'middleware.js'),
-  ])
-
-  childProcess.stdout.pipe(process.stdout)
-  childProcess.stderr.pipe(process.stderr)
+
+  const common = [`--bundle`, `--outdir=${resolve('.netlify')}`, `--format=esm`, `--target=esnext`, '--watch']
+
+  // TypeScript
+  execa(`esbuild`, [...common, resolve(base, 'middleware.ts')], { all: true }).all.pipe(process.stdout)
+
+  // JavaScript
+  execa(`esbuild`, [...common, resolve(base, 'middleware.js')], { all: true }).all.pipe(process.stdout)
+
   // Don't return the promise because we don't want to wait for the child process to finish
 }

packages/runtime/src/templates/edge/next-dev.js

@@ -19,6 +19,7 @@ const exists = async (relativePath) => {
     throw error
   }
 }
+let idx = 0
 
 const handler = async (req, context) => {
   // Uncomment when CLI update lands
@@ -34,8 +35,9 @@ const handler = async (req, context) => {
   // because that would also throw if there's an error in the middleware,
   // which we would want to surface not ignore.
   if (await exists('../../middleware.js')) {
-    // These will be user code
-    const nextMiddleware = await import('../../middleware.js')
+    // We need to cache-bust the import because otherwise it will claim it
+    // doesn't exist if the user creates it after the server starts
+    const nextMiddleware = await import(`../../middleware.js#${idx++}`)
     middleware = nextMiddleware.middleware
   } else {
     //  No middleware, so we silently return