diff --git a/packages/runtime/src/helpers/dev.ts b/packages/runtime/src/helpers/dev.ts
index cf7fe56c1a..fea2b24aa5 100644
--- a/packages/runtime/src/helpers/dev.ts
+++ b/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
 }
diff --git a/packages/runtime/src/templates/edge/next-dev.js b/packages/runtime/src/templates/edge/next-dev.js
index bfd2192ff5..8122284cb3 100644
--- a/packages/runtime/src/templates/edge/next-dev.js
+++ b/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