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

packages/vite/src/node/utils.ts

@@ -15,7 +15,7 @@ import type { DecodedSourceMap, RawSourceMap } from '@ampproject/remapping'
 import colors from 'picocolors'
 import debug from 'debug'
 import type { Alias, AliasOptions } from 'types/alias'
-import type MagicString from 'magic-string'
+import MagicString from 'magic-string'
 
 import type { TransformResult } from 'rollup'
 import { createFilter as _createFilter } from '@rollup/pluginutils'
@@ -1102,19 +1102,26 @@ function normalizeSingleAlias({
 
 /**
  * Transforms transpiled code result where line numbers aren't altered,
- * so we can skip sourcemap generation during dev
+ * so we can skip full sourcemap generation during dev, however we still
+ * have to make a minimal sourcemap with the source property set to the
+ * original file so debuggers know which one to step into.
  */
 export function transformStableResult(
   s: MagicString,
   id: string,
   config: ResolvedConfig
 ): TransformResult {
+  let map
+  if (config.command === 'build') {
+    map = config.build.sourcemap
+      ? s.generateMap({ hires: true, source: id })
+      : null
+  } else {
+    map = new MagicString(s.toString()).generateMap({ hires: true, source: id })
+  }
   return {
     code: s.toString(),
-    map:
-      config.command === 'build' && config.build.sourcemap
-        ? s.generateMap({ hires: true, source: id })
-        : null
+    map
   }
 }
 

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,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACzB;AACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;",
+        "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'

playground/vue-sourcemap/__tests__/__snapshots__/vue-sourcemap.spec.ts.snap

@@ -189,8 +189,7 @@ exports[`serve:vue-sourcemap > less with additionalData > serve-less-with-additi
 
 exports[`serve:vue-sourcemap > no script > serve-no-script 1`] = `
 {
-  "mappings": ";;;wBACE,oBAAwB,WAArB,aAAiB",
-  "sourceRoot": "",
+  "mappings": ";;;wBACE",
   "sources": [
     "/root/NoScript.vue",
   ],
@@ -206,7 +205,7 @@ exports[`serve:vue-sourcemap > no script > serve-no-script 1`] = `
 
 exports[`serve:vue-sourcemap > no template > serve-no-template 1`] = `
 {
-  "mappings": "AACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;AAGP;AACd,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;;",
+  "mappings": "AACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;AAGP;AACd,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC",
   "sources": [
     "/root/NoTemplate.vue",
   ],