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 24, 2023 · 1c53299 · 1c53299
1 parent 48150f2
commit 1c53299
Show file tree

Hide file tree

Showing 5 changed files with 20 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
@@ -271,6 +271,23 @@ async function loadAndTransform(
     if (map.mappings && !map.sourcesContent) {
       await injectSourcesContent(map, mod.file, logger)
     }
+    for (
+      let sourcesIndex = 0;
+      sourcesIndex < map.sources.length;
+      ++sourcesIndex
+    ) {
+      const sourcePath = map.sources[sourcesIndex]
+
+      // 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 (path.isAbsolute(sourcePath) && path.isAbsolute(mod.file)) {
+        map.sources[sourcesIndex] = path.relative(
+          path.dirname(mod.file),
+          sourcePath,
+        )
+      }
+    }
   }
 
   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/css-sourcemap/__tests__/css-sourcemap.spec.ts b/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts
@@ -70,8 +70,8 @@ describe.runIf(isServe)('serve', () => {
       {
         "mappings": "AAAA;EACE,UAAU;AACZ;;ACAA;EACE,UAAU;AACZ",
         "sources": [
-          "/root/be-imported.css",
-          "/root/linked-with-import.css",
+          "be-imported.css",
+          "linked-with-import.css",
         ],
         "sourcesContent": [
           ".be-imported {

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'