[edge] enable edge compiler source maps by default (#38365)

since we no longer have a single compiler for browser & edge, we can enable
source map generation by default for all edge functions. This would make it
much easier to debug and understand what's happening when deploying to prod
as the log statements will show us the actual code location instead of post
bundling and minified location.

This also removes the experimental flag as it's not needed anymore.

Author: Schniz

packages/next/build/webpack-config.ts

@@ -1449,12 +1449,6 @@ export default async function getBaseWebpackConfig(
       ].filter(Boolean),
     },
     plugins: [
-      ...(!dev &&
-      isEdgeServer &&
-      !!config.experimental.middlewareSourceMaps &&
-      !config.productionBrowserSourceMaps
-        ? require('./webpack/plugins/middleware-source-maps-plugin').getMiddlewareSourceMapPlugins()
-        : []),
       dev && isClient && new ReactRefreshWebpackPlugin(webpack),
       // Makes sure `Buffer` and `process` are polyfilled in client and flight bundles (same behavior as webpack 4)
       (isClient || isEdgeServer) &&

packages/next/build/webpack/config/blocks/base.ts

@@ -32,8 +32,11 @@ export const base = curry(function base(
       config.devtool = 'eval-source-map'
     }
   } else {
-    // Enable browser sourcemaps:
-    if (ctx.productionBrowserSourceMaps && ctx.isClient) {
+    if (
+      ctx.isEdgeRuntime ||
+      // Enable browser sourcemaps:
+      (ctx.productionBrowserSourceMaps && ctx.isClient)
+    ) {
       config.devtool = 'source-map'
     } else {
       config.devtool = false

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

@@ -119,7 +119,6 @@ export interface ExperimentalConfig {
     unoptimized?: boolean
     allowFutureImage?: boolean
   }
-  middlewareSourceMaps?: boolean
   modularizeImports?: Record<
     string,
     {
@@ -549,7 +548,6 @@ export const defaultConfig: NextConfig = {
     disablePostcssPresetEnv: undefined,
     amp: undefined,
     urlImports: undefined,
-    middlewareSourceMaps: undefined,
     modularizeImports: undefined,
   },
 }

packages/next/server/config-shared.ts

@@ -33,7 +33,10 @@ const clientGlobs = [
   },
   {
     name: 'Middleware size',
-    globs: ['.next/server/middleware*', '.next/server/edge-runtime-webpack.js'],
+    globs: [
+      '.next/server/middleware*.js',
+      '.next/server/edge-runtime-webpack.js',
+    ],
   },
 ]
 

test/.stats-app/stats-config.js

@@ -3,68 +3,47 @@ import { NextInstance } from 'test/lib/next-modes/base'
 import fs from 'fs-extra'
 import path from 'path'
 
-const files = {
-  'pages/index.js': `
-    export default function () { return <div>Hello, world!</div> }
-  `,
-  'middleware.js': `
-    import { NextResponse } from "next/server";
-    export default function middleware() { 
-      return NextResponse.next();
-    } 
-  `,
-}
-
-describe('experimental.middlewareSourceMaps: true', () => {
+describe('Middleware source maps', () => {
   let next: NextInstance
 
-  const nextConfig = { experimental: { middlewareSourceMaps: true } }
-
-  afterEach(() => next.destroy())
-
-  it('generates a source map', async () => {
-    next = await createNext({ nextConfig, files })
-
-    const middlewarePath = path.resolve(
-      next.testDir,
-      '.next/server/middleware.js'
-    )
-    expect(await fs.pathExists(middlewarePath)).toEqual(true)
-    expect(await fs.pathExists(`${middlewarePath}.map`)).toEqual(true)
-  })
-
-  it('generates a source map from src', async () => {
+  beforeAll(async () => {
     next = await createNext({
-      nextConfig,
-      files: Object.fromEntries(
-        Object.entries(files).map(([filename, content]) => [
-          `src/${filename}`,
-          content,
-        ])
-      ),
+      files: {
+        'pages/index.js': `
+          export default function () { return <div>Hello, world!</div> }
+        `,
+        'pages/api/edge.js': `
+          export const config = { runtime: 'experimental-edge' };
+          export default function (req) {
+            return new Response("Hello from " + req.url);
+          }
+        `,
+        'middleware.js': `
+          import { NextResponse } from "next/server";
+          export default function middleware() { 
+            return NextResponse.next();
+          } 
+        `,
+      },
     })
+  })
+  afterAll(() => next.destroy())
 
+  it('generates a source map for Middleware', async () => {
     const middlewarePath = path.resolve(
       next.testDir,
-      '.next/server/src/middleware.js'
+      '.next/server/middleware.js'
     )
     expect(await fs.pathExists(middlewarePath)).toEqual(true)
     expect(await fs.pathExists(`${middlewarePath}.map`)).toEqual(true)
   })
-})
-
-describe('experimental.middlewareSourceMaps: false', () => {
-  let next: NextInstance
-
-  afterEach(() => next.destroy())
 
-  it('does not generate a source map', async () => {
-    next = await createNext({ files })
-    const middlewarePath = path.resolve(
+  it('generates a source map for Edge API', async () => {
+    const edgePath = path.resolve(
       next.testDir,
-      '.next/server/middleware.js'
+      '.next/server/pages/api/edge.js'
     )
-    expect(await fs.pathExists(middlewarePath)).toEqual(true)
-    expect(await fs.pathExists(`${middlewarePath}.map`)).toEqual(false)
+    expect(await fs.pathExists(edgePath)).toEqual(true)
+    expect(await fs.pathExists(`${edgePath}.map`)).toEqual(true)
   })
 })