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

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

@@ -5,6 +5,7 @@ import getEtag from 'etag'
 import * as 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 {
   cleanUrl,
@@ -249,6 +250,11 @@ async function loadAndTransform(
     isDebug && debugTransform(`${timeFrom(transformStart)} ${prettyUrl}`)
     code = transformResult.code!
     map = transformResult.map
+
+    // To enable debugging create a sourcemap for known modified JS files without one:
+    if (!map && mod.file && mod.type === 'js' && code !== originalCode) {
+      map = new MagicString(code).generateMap({ source: mod.file })
+    }
   }
 
   if (map && mod.file) {

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

@@ -8,13 +8,31 @@ 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": [
+          null,
+        ],
+        "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'