fix: handle sourcemap correctly when multiple line import exists (#14232)

Author: sapphi-red

packages/vite/src/node/plugins/importAnalysis.ts

@@ -850,16 +850,17 @@ export function interopNamedImports(
     se: expEnd,
     d: dynamicIndex,
   } = importSpecifier
+  const exp = source.slice(expStart, expEnd)
   if (dynamicIndex > -1) {
     // rewrite `import('package')` to expose the default directly
     str.overwrite(
       expStart,
       expEnd,
-      `import('${rewrittenUrl}').then(m => m.default && m.default.__esModule ? m.default : ({ ...m.default, default: m.default }))`,
+      `import('${rewrittenUrl}').then(m => m.default && m.default.__esModule ? m.default : ({ ...m.default, default: m.default }))` +
+        getLineBreaks(exp),
       { contentOnly: true },
     )
   } else {
-    const exp = source.slice(expStart, expEnd)
     const rawUrl = source.slice(start, end)
     const rewritten = transformCjsImport(
       exp,
@@ -870,14 +871,28 @@ export function interopNamedImports(
       config,
     )
     if (rewritten) {
-      str.overwrite(expStart, expEnd, rewritten, { contentOnly: true })
+      str.overwrite(expStart, expEnd, rewritten + getLineBreaks(exp), {
+        contentOnly: true,
+      })
     } else {
       // #1439 export * from '...'
-      str.overwrite(start, end, rewrittenUrl, { contentOnly: true })
+      str.overwrite(
+        start,
+        end,
+        rewrittenUrl + getLineBreaks(source.slice(start, end)),
+        {
+          contentOnly: true,
+        },
+      )
     }
   }
 }
 
+// get line breaks to preserve line count for not breaking source maps
+function getLineBreaks(str: string) {
+  return str.includes('\n') ? '\n'.repeat(str.split('\n').length - 1) : ''
+}
+
 type ImportNameSpecifier = { importedName: string; localName: string }
 
 /**

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

@@ -44,6 +44,32 @@ if (!isBuild) {
     `)
   })
 
+  test('multiline import', async () => {
+    const res = await page.request.get(
+      new URL('./with-multiline-import.ts', page.url()).href,
+    )
+    const multi = await res.text()
+    const map = extractSourcemap(multi)
+    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
+      {
+        "mappings": "AACA;AAAA,EACE;AAAA,OACK;AAEP,QAAQ,IAAI,yBAAyB,GAAG;",
+        "sources": [
+          "with-multiline-import.ts",
+        ],
+        "sourcesContent": [
+          "// prettier-ignore
+      import {
+        foo
+      } from '@vitejs/test-importee-pkg'
+
+      console.log('with-multiline-import', foo)
+      ",
+        ],
+        "version": 3,
+      }
+    `)
+  })
+
   test('should not output missing source file warning', () => {
     serverLogs.forEach((log) => {
       expect(log).not.toMatch(/Sourcemap for .+ points to missing source files/)

playground/js-sourcemap/importee-pkg/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/no-commonjs
+exports.foo = 'foo'

playground/js-sourcemap/importee-pkg/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@vitejs/test-importee-pkg",
+  "private": true,
+  "version": "0.0.0",
+  "main": "./index.js"
+}

playground/js-sourcemap/index.html

@@ -6,3 +6,4 @@ <h1>JS Sourcemap</h1>
 <script type="module" src="./foo.js"></script>
 <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>

playground/js-sourcemap/package.json

@@ -8,5 +8,8 @@
     "build": "vite build",
     "debug": "node --inspect-brk ../../packages/vite/bin/vite",
     "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vitejs/test-importee-pkg": "file:importee-pkg"
   }
 }

playground/js-sourcemap/with-multiline-import.ts

@@ -0,0 +1,6 @@
+// prettier-ignore
+import {
+  foo
+} from '@vitejs/test-importee-pkg'
+
+console.log('with-multiline-import', foo)