New breakpoints are mapped to incorrect lines / sourcemap after Vite HMR in existing attached debugger

[qm965]

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:
https://github.com/microsoft/vscode-js-debug/assets/70834319/a64ebdba-ca5d-492f-9195-61eb5dd233e5

run pnpm create vite and select react,typescript template

Version: 1.80.0 (Universal)
Commit: 660393deaaa6d1996740ff4880f1bad43768c814
Date: 2023-07-04T13:39:33.766Z (2 wks ago)
Electron: 22.3.14
ElectronBuildId: 21893604
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Darwin x64 21.5.0

refers to: vitejs/vite-plugin-vue#33

[qm965]

[fnicastri]

Experiencing something similar with Vite + Typescript + Svelte.
Breakpoints are mapped on localhost:5173/.../file.svelte transpiled file and to the wrong line and not on the source.

This happens even at the first run, not just after HMR

[connor4312]

@fnicastri that is unrelated, this bug is specifically for HMR.

This may duplicate microsoft/vscode#155331

[michaellimair]

Hi @connor4312, was digging around the interwebs and looks like a fix similar to this one for Webpack HMR will fix the issue. Seems like there needs to be some special handling for Vite HMR URLs (e.g. ?t=123123123123).

Looks related to this issue in @vitejs/plugin-react vitejs/vite-plugin-react/issues/23

[qm965]

hi, @connor4312 , I have tested this bugfix by visx, which was built by running npm run package in my own native environment.
the breakpoints had not breaked in app.tsx/t=***** file ,but its position will change.

like this: https://github.com/microsoft/vscode-js-debug/assets/70834319/b00307b9-707c-426b-a2f8-1ea07d2325cf

[qm965]

@connor4312 Is this because the breakpoint locations did not change along with the changes in the source code?

[connor4312]

Desync like that is kind of expected as the events between the file being saved, vite building an HMR and loading it, and vscode telling the debugger about new breakpoints are not synchronized. But yes unsetting the breakpoint and resetting it in vscode once your changes are HMR'd in should be a very reliable way to have things work.

You don't need to build your own vsix to test it, you can use the nightly build