[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.
vercel · Jul 6, 2022 · 708688d · 708688d
1 parent f396988
commit 708688d
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 97 deletions.
diff --git a/packages/next/build/webpack-config.ts b/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) &&

diff --git a/packages/next/build/webpack/config/blocks/base.ts b/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

diff --git a/packages/next/build/webpack/plugins/middleware-source-maps-plugin.ts b/packages/next/build/webpack/plugins/middleware-source-maps-plugin.ts
diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.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,
   },
 }

diff --git a/test/.stats-app/stats-config.js b/test/.stats-app/stats-config.js
@@ -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',
+    ],
   },
 ]
 

diff --git a/test/production/generate-middleware-source-maps/index.test.ts b/test/production/generate-middleware-source-maps/index.test.ts
@@ -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)
   })
 })