fix: use relative paths in sources of transformed source maps

This refines the fix from #4985 to turn absolute paths into relative paths for the `sources` array in source maps for transformer outputs (and thereby completely avoids the Windows drive letter problem). In order to minimize unintended negative side effects, we perform this step only when the source file name is absolute. This addresses the issue that source files show up with an absolute path prefix in case of Vue[^1]. Bug: https://crbug.com/1411596 Ref: #4964 Ref: #4912 [^1]: https://goo.gle/devtools-vite-interoperability
vitejs · Feb 23, 2023 · bfca7dc · bfca7dc
1 parent 48150f2
commit bfca7dc
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 11 deletions.
diff --git a/packages/vite/src/node/plugins/esbuild.ts b/packages/vite/src/node/plugins/esbuild.ts
@@ -18,7 +18,6 @@ import {
   createFilter,
   ensureWatchedFile,
   generateCodeFrame,
-  toUpperCaseDriveLetter,
 } from '../utils'
 import type { ResolvedConfig, ViteDevServer } from '..'
 import type { Plugin } from '../plugin'
@@ -192,9 +191,6 @@ export async function transformWithEsbuild(
           ? JSON.parse(result.map)
           : { mappings: '' }
     }
-    if (Array.isArray(map.sources)) {
-      map.sources = map.sources.map((it) => toUpperCaseDriveLetter(it))
-    }
     return {
       ...result,
       map,

diff --git a/packages/vite/src/node/server/transformRequest.ts b/packages/vite/src/node/server/transformRequest.ts
@@ -266,11 +266,25 @@ async function loadAndTransform(
     map = transformResult.map
   }
 
-  if (map && mod.file) {
+  if (map) {
     map = (typeof map === 'string' ? JSON.parse(map) : map) as SourceMap
-    if (map.mappings && !map.sourcesContent) {
+    if (mod.file && map.mappings && !map.sourcesContent) {
       await injectSourcesContent(map, mod.file, logger)
     }
+    // Rewrite sources to relative paths to give debuggers the chance
+    // to resolve and display them in a meaningful way (rather than
+    // with absolute paths).
+    if (Array.isArray(map.sources)) {
+      const file = map.file ?? mod.file
+      if (file && path.isAbsolute(file)) {
+        const sourceFolder = path.dirname(file)
+        map.sources = map.sources.map((source) =>
+          path.isAbsolute(source)
+            ? path.relative(sourceFolder, source)
+            : source,
+        )
+      }
+    }
   }
 
   const result =

diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
@@ -909,10 +909,6 @@ export function arraify<T>(target: T | T[]): T[] {
   return Array.isArray(target) ? target : [target]
 }
 
-export function toUpperCaseDriveLetter(pathName: string): string {
-  return pathName.replace(/^\w:/, (letter) => letter.toUpperCase())
-}
-
 // Taken from https://stackoverflow.com/a/36328890
 export const multilineCommentsRE = /\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\//g
 export const singlelineCommentsRE = /\/\/.*/g

diff --git a/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts b/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts
@@ -24,7 +24,7 @@ if (!isBuild) {
       {
         "mappings": "AAAO,aAAM,MAAM;",
         "sources": [
-          "/root/bar.ts",
+          "bar.ts",
         ],
         "sourcesContent": [
           "export const bar = 'bar'