fix(sourcemap): sourcemap is incorrect when sourcemap has `sources: […

…null]` (#14588)

Co-authored-by: 翠 / green <[email protected]>

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

@@ -600,7 +600,20 @@ export async function createPluginContainer(
           break
         }
         if (!combinedMap) {
-          combinedMap = m as SourceMap
+          const sm = m as SourceMap
+          // sourcemap should not include `sources: [null]` (because `sources` should be string) nor
+          // `sources: ['']` (because `''` means the path of sourcemap)
+          // but MagicString generates this when `filename` option is not set.
+          // Rollup supports these and therefore we support this as well
+          if (sm.sources.length === 1 && !sm.sources[0]) {
+            combinedMap = {
+              ...sm,
+              sources: [this.filename],
+              sourcesContent: [this.originalCode],
+            }
+          } else {
+            combinedMap = sm
+          }
         } else {
           combinedMap = combineSourcemaps(cleanUrl(this.filename), [
             m as RawSourceMap,

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

@@ -31,6 +31,27 @@ if (!isBuild) {
     `)
   })
 
+  test('plugin return sourcemap with `sources: [""]`', async () => {
+    const res = await page.request.get(new URL('./zoo.js', page.url()).href)
+    const js = await res.text()
+    expect(js).toContain('// add comment')
+
+    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;",
+        "sources": [
+          "zoo.js",
+        ],
+        "sourcesContent": [
+          "export const zoo = 'zoo'
+      ",
+        ],
+        "version": 3,
+      }
+    `)
+  })
+
   test('js with inline sourcemap injected by a plugin', async () => {
     const res = await page.request.get(
       new URL('./foo-with-sourcemap.js', page.url()).href,

playground/js-sourcemap/index.html

@@ -7,3 +7,4 @@ <h1>JS Sourcemap</h1>
 <script type="module" src="./bar.ts"></script>
 <script type="module" src="./after-preload-dynamic.js"></script>
 <script type="module" src="./with-multiline-import.ts"></script>
+<script type="module" src="./zoo.js"></script>

playground/js-sourcemap/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vitejs/test-importee-pkg": "file:importee-pkg"
+    "@vitejs/test-importee-pkg": "file:importee-pkg",
+    "magic-string": "^0.30.5"
   }
 }

playground/js-sourcemap/plugin-foo.js

@@ -0,0 +1 @@
+export const foo = 'foo'

playground/js-sourcemap/vite.config.js

@@ -1,8 +1,12 @@
 import { defineConfig } from 'vite'
 import transformFooWithInlineSourceMap from './foo-with-sourcemap-plugin'
+import { transformZooWithSourcemapPlugin } from './zoo-with-sourcemap-plugin'
 
 export default defineConfig({
-  plugins: [transformFooWithInlineSourceMap()],
+  plugins: [
+    transformFooWithInlineSourceMap(),
+    transformZooWithSourcemapPlugin(),
+  ],
   build: {
     sourcemap: true,
     rollupOptions: {

playground/js-sourcemap/zoo-with-sourcemap-plugin.ts

@@ -0,0 +1,18 @@
+import MagicString from 'magic-string'
+import type { Plugin } from 'vite'
+
+export const transformZooWithSourcemapPlugin: () => Plugin = () => ({
+  name: 'sourcemap',
+  transform(code, id) {
+    if (id.includes('zoo.js')) {
+      const ms = new MagicString(code)
+      ms.append('// add comment')
+      return {
+        code: ms.toString(),
+        // NOTE: MagicString without `filename` option generates
+        //       a sourcemap with `sources: ['']` or `sources: [null]`
+        map: ms.generateMap({ hires: true }),
+      }
+    }
+  },
+})

playground/js-sourcemap/zoo.js

@@ -0,0 +1 @@
+export const zoo = 'zoo'