fix(switchable-runtime): Make it possible to switch between edge and server runtime in dev

packages/next/build/webpack-config.ts

@@ -1223,6 +1223,7 @@ export default async function getBaseWebpackConfig(
     },
     watchOptions,
     output: {
+      ['compareBeforeEmit' as any]: false,
       // we must set publicPath to an empty value to override the default of
       // auto which doesn't work in IE11
       publicPath: `${config.assetPrefix || ''}/_next/`,

packages/next/build/webpack/plugins/middleware-plugin.ts

@@ -44,12 +44,6 @@ interface EntryMetadata {
 }
 
 const NAME = 'MiddlewarePlugin'
-const middlewareManifest: MiddlewareManifest = {
-  sortedMiddleware: [],
-  middleware: {},
-  functions: {},
-  version: 1,
-}
 
 export default class MiddlewarePlugin {
   dev: boolean
@@ -550,6 +544,13 @@ function getCreateAssets(params: {
 }) {
   const { compilation, metadataByEntry } = params
   return (assets: any) => {
+    const middlewareManifest: MiddlewareManifest = {
+      sortedMiddleware: [],
+      middleware: {},
+      functions: {},
+      version: 1,
+    }
+
     for (const entrypoint of compilation.entrypoints.values()) {
       if (!entrypoint.name) {
         continue

packages/next/server/dev/hot-reloader.ts

@@ -29,6 +29,7 @@ import { findPageFile } from '../lib/find-page-file'
 import {
   BUILDING,
   entries,
+  getInvalidator,
   onDemandEntryHandler,
 } from './on-demand-entry-handler'
 import { denormalizePagePath } from '../../shared/lib/page-path/denormalize-page-path'

packages/next/server/dev/on-demand-entry-handler.ts

@@ -310,6 +310,13 @@ export function onDemandEntryHandler({
 
       const addPageEntry = (type: 'client' | 'server' | 'edge-server') => {
         return new Promise<void>((resolve, reject) => {
+          if (type === 'server' && entries[`edge-server${page}`]) {
+            // Runtime switched from edge to server
+            delete entries[`edge-server${page}`]
+          } else if (type === 'edge-server' && entries[`server${page}`]) {
+            // Runtime switched from server to edge
+            delete entries[`server${page}`]
+          }
           const isServerComponent = serverComponentRegex.test(
             pagePathData.absolutePagePath
           )
@@ -461,7 +468,6 @@ class Invalidator {
     // So, it can re-build the queued pages at once.
     if (this.building) {
       this.rebuildAgain = true
-      return
     }
 
     this.building = true

test/development/edge-api-routes/index.test.ts

@@ -0,0 +1,140 @@
+import { createNext } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { check, renderViaHTTP } from 'next-test-utils'
+
+describe('edge-api-routes', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        'pages/index.js': `
+          export default function Page() { 
+            return <p>hello world</p>
+          } 
+        `,
+      },
+      dependencies: {},
+    })
+  })
+  afterAll(() => next.destroy())
+
+  test('Switch between runtimes - edge first', async () => {
+    // Edge
+    await next.patchFile(
+      'pages/api/hello.js',
+      `
+      export const config = {
+        runtime: 'experimental-edge',
+      }
+
+      export default () => new Response('edge response')
+      `
+    )
+    await check(() => renderViaHTTP(next.url, '/api/hello'), 'edge response')
+
+    // Server
+    await next.patchFile(
+      'pages/api/hello.js',
+      `
+      export default function (req, res) {
+        res.send('server response')
+      }
+      `
+    )
+    await check(() => renderViaHTTP(next.url, '/api/hello'), 'server response')
+
+    // Edge
+    await next.patchFile(
+      'pages/api/hello.js',
+      `
+        export const config = {
+          runtime: 'experimental-edge',
+        }
+
+        export default () => new Response('edge response')
+        `
+    )
+    await check(() => renderViaHTTP(next.url, '/api/hello'), 'edge response')
+  })
+
+  test('Switch between runtimes - server first', async () => {
+    // Server
+    await next.patchFile(
+      'pages/api/hello2.js',
+      `
+      export default function (req, res) {
+        res.send('server response')
+      }
+      `
+    )
+    await check(() => renderViaHTTP(next.url, '/api/hello2'), 'server response')
+
+    // Edge
+    await next.patchFile(
+      'pages/api/hello2.js',
+      `
+      export const config = {
+        runtime: 'experimental-edge',
+      }
+
+      export default () => new Response('edge response')
+      `
+    )
+    await check(() => renderViaHTTP(next.url, '/api/hello2'), 'edge response')
+
+    // Server
+    await next.patchFile(
+      'pages/api/hello2.js',
+      `
+        export default function (req, res) {
+          res.send('server response')
+        }
+        `
+    )
+    await check(() => renderViaHTTP(next.url, '/api/hello2'), 'server response')
+  })
+
+  test('Recover from syntax error', async () => {
+    await next.patchFile(
+      'pages/api/hello3.js',
+      `
+    export const config = {
+      runtime: 'experimental-edge',
+    }
+
+    export default () => new Response('edge response')
+    `
+    )
+    await check(() => renderViaHTTP(next.url, '/api/hello3'), 'edge response')
+
+    // Syntax error
+    await next.patchFile(
+      'pages/api/hello3.js',
+      `
+    export const config = {
+      runtime: 'experimental-edge',
+    }
+
+    export default  => new Response('edge response')
+    `
+    )
+    await check(
+      () => renderViaHTTP(next.url, '/api/hello3'),
+      /Unexpected token/
+    )
+
+    // Fix syntax error
+    await next.patchFile(
+      'pages/api/hello3.js',
+      `
+    export const config = {
+      runtime: 'experimental-edge',
+    }
+
+    export default () => new Response('edge response 2')
+    `
+    )
+    await check(() => renderViaHTTP(next.url, '/api/hello3'), 'edge response 2')
+  })
+})