fix(source map): correctly generate source maps (#20672)

Fixes #20500

packages/next/build/webpack-config.ts

@@ -211,8 +211,6 @@ export default async function getBaseWebpackConfig(
     rewrites: Rewrite[]
   }
 ): Promise<webpack.Configuration> {
-  const productionBrowserSourceMaps =
-    config.productionBrowserSourceMaps && !isServer
   let plugins: PluginMetaData[] = []
   let babelPresetPlugins: { dir: string; config: any }[] = []
 
@@ -1216,7 +1214,7 @@ export default async function getBaseWebpackConfig(
     isServer,
     assetPrefix: config.assetPrefix || '',
     sassOptions: config.sassOptions,
-    productionBrowserSourceMaps,
+    productionBrowserSourceMaps: config.productionBrowserSourceMaps,
   })
 
   let originalDevtool = webpackConfig.devtool

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

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

packages/next/build/webpack/plugins/terser-webpack-plugin/src/index.js

@@ -226,11 +226,9 @@ class TerserPlugin {
 
             return traceAsyncFn(assetSpan, async () => {
               if (!output) {
-                let inputSourceMap
-
                 const {
                   source: sourceFromInputSource,
-                  map,
+                  map: inputSourceMap,
                 } = inputSource.sourceAndMap()
 
                 const input = Buffer.isBuffer(sourceFromInputSource)
@@ -240,7 +238,7 @@ class TerserPlugin {
                 const options = {
                   name,
                   input,
-                  inputSourceMap: map,
+                  inputSourceMap,
                   terserOptions: { ...this.options.terserOptions },
                 }
 
@@ -337,8 +335,8 @@ class TerserPlugin {
           })
 
       const handleHashForChunk = (hash, chunk) => {
-        // increment 'b' to invalidate cache
-        hash.update('b')
+        // increment 'c' to invalidate cache
+        hash.update('c')
       }
 
       if (isWebpack5) {

test/integration/production-browser-sourcemaps/test/index.test.js

 /* eslint-env jest */
 import fs from 'fs-extra'
 import { join } from 'path'
-import { nextBuild } from 'next-test-utils'
+import { nextBuild, getPageFileFromBuildManifest } from 'next-test-utils'
 import { recursiveReadDir } from 'next/dist/lib/recursive-readdir'
 
 jest.setTimeout(1000 * 60 * 2)
@@ -24,6 +24,24 @@ function runTests() {
       expect(browserFiles.includes(`${file}.map`)).toBe(true)
     })
   })
+
+  it('correctly generated the source map', async () => {
+    const map = JSON.parse(
+      await fs.readFile(
+        join(
+          appDir,
+          '.next',
+          (await getPageFileFromBuildManifest(appDir, '/static')) + '.map'
+        ),
+        'utf8'
+      )
+    )
+
+    expect(map.sources).toContainEqual(
+      expect.stringMatching(/pages[/\\]static\.js/)
+    )
+    expect(map.names).toContainEqual('StaticPage')
+  })
 }
 
 describe('Production browser sourcemaps', () => {