fix(sourcemap): dont inject fallback sourcemap if have existing (#14370)

packages/vite/rollup.config.ts

@@ -195,7 +195,7 @@ function createCjsConfig(isProduction: boolean) {
       ...Object.keys(pkg.dependencies),
       ...(isProduction ? [] : Object.keys(pkg.devDependencies)),
     ],
-    plugins: [...createNodePlugins(false, false, false), bundleSizeLimit(155)],
+    plugins: [...createNodePlugins(false, false, false), bundleSizeLimit(161)],
   })
 }
 

packages/vite/src/node/server/send.ts

@@ -4,12 +4,17 @@ import type {
   ServerResponse,
 } from 'node:http'
 import path from 'node:path'
+import convertSourceMap from 'convert-source-map'
 import getEtag from 'etag'
 import type { SourceMap } from 'rollup'
 import MagicString from 'magic-string'
-import { removeTimestampQuery } from '../utils'
+import { createDebugger, removeTimestampQuery } from '../utils'
 import { getCodeWithSourcemap } from './sourcemap'
 
+const debug = createDebugger('vite:send', {
+  onlyWhenFocused: true,
+})
+
 const alias: Record<string, string | undefined> = {
   js: 'application/javascript',
   css: 'text/css',
@@ -63,13 +68,20 @@ export function send(
     if (type === 'js' || type === 'css') {
       content = getCodeWithSourcemap(type, content.toString(), map)
     }
-  } else {
-    if (type === 'js' && (!map || map.mappings !== '')) {
+  }
+  // inject fallback sourcemap for js for improved debugging
+  // https://github.com/vitejs/vite/pull/13514#issuecomment-1592431496
+  else if (type === 'js' && (!map || map.mappings !== '')) {
+    const code = content.toString()
+    // if the code has existing inline sourcemap, assume it's correct and skip
+    if (convertSourceMap.mapFileCommentRegex.test(code)) {
+      debug?.(`Skipped injecting fallback sourcemap for ${req.url}`)
+    } else {
       const urlWithoutTimestamp = removeTimestampQuery(req.url!)
-      const ms = new MagicString(content.toString())
+      const ms = new MagicString(code)
       content = getCodeWithSourcemap(
         type,
-        content.toString(),
+        code,
         ms.generateMap({
           source: path.basename(urlWithoutTimestamp),
           hires: 'boundary',

playground/js-sourcemap/__tests__/js-sourcemap.spec.ts

@@ -1,5 +1,6 @@
 import { URL } from 'node:url'
 import { describe, expect, test } from 'vitest'
+import { mapFileCommentRegex } from 'convert-source-map'
 import {
   extractSourcemap,
   findAssetFile,
@@ -29,6 +30,30 @@ if (!isBuild) {
     `)
   })
 
+  test('js with existing inline sourcemap', async () => {
+    const res = await page.request.get(
+      new URL('./foo-with-sourcemap.js', page.url()).href,
+    )
+    const js = await res.text()
+
+    const sourcemapComments = js.match(mapFileCommentRegex).length
+    expect(sourcemapComments).toBe(1)
+
+    const map = extractSourcemap(js)
+    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
+      {
+        "mappings": "AAAA,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG",
+        "sources": [
+          "",
+        ],
+        "sourcesContent": [
+          null,
+        ],
+        "version": 3,
+      }
+    `)
+  })
+
   test('ts', async () => {
     const res = await page.request.get(new URL('./bar.ts', page.url()).href)
     const js = await res.text()