Enabling modulePreload results in incorrect sourcemaps after the preload code

[JosNun]

Describe the bug

When build.modulePreload is enabled in the vite config, the sourcemaps for the generated bundle are incorrect after the location of the inserted preload code (source is here, I believe). The sourcemaps for any code before the preload script in the generated bundle are correct.

When disabling modulePreload by setting the config to false, the sourcemaps are correct. Enabling the modulePreloading, but disabling the polyfill results in the incorrect sourcemaps.

It seems that there needs to be multiple chunks for the issue to happen. In the reproduction repo, utils.ts file was added to create another chunk, though using the splitVendorChunkPlugin will also cause the issue.

Reproduction

https://github.com/JosNun/vite-modulepreload-sourcemap-issue

Steps to reproduce

• Clone the reproduction repo
• npm install
• vite build --mode=production
• vite preview

Clicking the "throw an error" button will cause an exception. The sourcemapped line in devtools points to the wrong line (and in this case, file) in the code when module preloading is enabled.

System Info

System:
    OS: macOS 13.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 99.94 MB / 32.00 GB
    Shell: 3.5.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 16.17.1 - ~/.volta/tools/image/node/16.17.1/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 8.15.0 - ~/.volta/tools/image/node/16.17.1/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Firefox: 109.0.1
    Safari: 16.2
  npmPackages:
    @vitejs/plugin-react: ^3.1.0 => 3.1.0 
    vite: ^4.1.1 => 4.1.1

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

A more trimmed repro: https://stackblitz.com/edit/vitejs-vite-jrprvt?file=src%2FApp.ts&terminal=dev

It seems changing this line like this works.

const content = `[${renderedDeps.join(',')}]`
s.update(
  markerStartPos,
  markerStartPos + preloadMarkerWithQuote.length,
  content + ' '.repeat(Math.max(preloadMarkerWithQuote.length - content.length, 0))
);

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

Lines 568 to 572 in e033e49

	s.update(
	markerStartPos,
	markerStartPos + preloadMarkerWithQuote.length,
	`[${renderedDeps.join(',')}]`,
	)

Maybe when replacing a text with a shorter text breaks the sourcemap?

---

Edit: This wasn't correct. See #12642

[bluwy]

Looks like a reasonable fix. Perhaps when the replacement is shorter, the sourcemap evaluator goes out-of-bounds when indexing a column, but that's just a guess.