fix: missing js sourcemaps with rewritten imports broke debugging (#7767) (#9476)

Co-authored-by: sapphi-red <green@sapphi.red>

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

@@ -5,6 +5,7 @@ import getEtag from 'etag'
 import convertSourceMap from 'convert-source-map'
 import type { SourceDescription, SourceMap } from 'rollup'
 import colors from 'picocolors'
+import MagicString from 'magic-string'
 import type { ViteDevServer } from '..'
 import {
   blankReplacer,
@@ -18,6 +19,8 @@ import {
 } from '../utils'
 import { checkPublicFile } from '../plugins/asset'
 import { getDepsOptimizer } from '../optimizer'
+import { isCSSRequest } from '../plugins/css'
+import { SPECIAL_QUERY_RE } from '../constants'
 import { injectSourcesContent } from './sourcemap'
 import { isFileServingAllowed } from './middlewares/static'
 
@@ -254,11 +257,26 @@ async function loadAndTransform(
     isDebug && debugTransform(`${timeFrom(transformStart)} ${prettyUrl}`)
     code = transformResult.code!
     map = transformResult.map
+
+    // To enable IDE debugging, add a minimal sourcemap for modified JS files without one
+    if (
+      !map &&
+      mod.file &&
+      mod.type === 'js' &&
+      code !== originalCode &&
+      !(isCSSRequest(id) && !SPECIAL_QUERY_RE.test(id)) // skip CSS : #9914
+    ) {
+      map = new MagicString(code).generateMap({ source: mod.file })
+    }
   }
 
   if (map && mod.file) {
     map = (typeof map === 'string' ? JSON.parse(map) : map) as SourceMap
-    if (map.mappings && !map.sourcesContent) {
+    if (
+      map.mappings &&
+      (!map.sourcesContent ||
+        (map.sourcesContent as Array<string | null>).includes(null))
+    ) {
       await injectSourcesContent(map, mod.file, logger)
     }
   }

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

@@ -9,13 +9,34 @@ import {
 } from '~utils'
 
 if (!isBuild) {
-  test('js', async () => {
+  test('js without import', async () => {
     const res = await page.request.get(new URL('./foo.js', page.url()).href)
     const js = await res.text()
     const lines = js.split('\n')
     expect(lines[lines.length - 1].includes('//')).toBe(false) // expect no sourcemap
   })
 
+  test('js', async () => {
+    const res = await page.request.get(new URL('./qux.js', page.url()).href)
+    const js = await res.text()
+    const map = extractSourcemap(js)
+    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
+      {
+        "mappings": "AAAA;AACA;AACA;",
+        "sources": [
+          "/root/qux.js",
+        ],
+        "sourcesContent": [
+          "import { foo } from './foo'
+
+export const qux = 'qux'
+",
+        ],
+        "version": 3,
+      }
+    `)
+  })
+
   test('ts', async () => {
     const res = await page.request.get(new URL('./bar.ts', page.url()).href)
     const js = await res.text()

playground/js-sourcemap/qux.js

@@ -0,0 +1,3 @@
+import { foo } from './foo'
+
+export const qux = 'qux'