Describe the bug

Trying to debug a vite+vue+ts app doesn't work for me. As soon as HMR runs the vscode debugger no longer stops on breakpoints. Possible the sourcemap gets out of sync.

In addition, chrome devtools doesn't show the source code but the hard to read minified code.

Similar bugs:

1. Line numbers in TypeScript broken for Chrome/VSCode debugging vite#5834 although this report mentions that "the application does indeed break at the expected moment, and both Chrome Debugger and VSCode highlight the same (correct) lines", which is different behavior than mentioned in this report.

2. [@vitejs/plugin-react] VS Code Breakpoints do not get hit after first fast refresh in plugin-react in new project vite-plugin-react#23 might be the same issue but uses react. It does mention that a browser refresh fixes it, but does not mention the problem that setting breakpoints elsewhere in the code is no longer always possible.

The issue at hand seems that after HMR the sourcemaps get messed up. I suspect that the issue goes deeper than that as I have a more complex app where the source map remains incorrect even after clearing the cache. Anyway lets fix get the simple case addressed.

Reproduction

1. Create a new vite app as follows

yarn create @vitejs/app; select vue as framework and vue-ts as the variant

2. Build and run the dev server:

yarn
yarn dev

3. start vscode (I'm using 1.62.3) and add the project folder to the workspace
4. configure the launcher for chrome - run - add configuration - chrome; change the url port to 3000
5. Start debugging. This should launch chrome displaying the vite demo app
6. Open src/components/HelloWorld.vue in vscode and set a breakpoint on line 29, eg the button that has count++
7. Click on the button: -> result vscode stops at the breakpoint as expected
8. Edit the line to increment count by two, eg count+=2. Save
9. Click on the button again
   Expected behavior: vscode stops at the breakpoint
   Actual behavior: breakpoint is ignored

After reloading the browser (F5) the breakpoint works again in this simple example until the code changes.

To spice it up a bit, replace the line with count++ to invoke a function 'incrementCount as follows:

  <button type="button" @click="() => incrementCount()">count is: {{ count }}</button>

and add this function in the script section:

const incrementCount = () => {
  count.value += 22
}

Repeat the test, this time setting the breakpoint in the function.-> this works as expected

Now try to set the breakpoint on the line with the button click. vscode will add a breakpoint in HelloWorld.vue?import=&t=1638336354075 (or something like it).

Hit the count button again... => expected behavior, the debugger stops. Actual behavior: the debugger does not stop.
Hit F5 in the browser. => expected behavior, the browser refreshes and shows the app. Actual behavior, the debugger stops somewhere randomly.

System Info

System:
    OS: Linux 5.13 Ubuntu 21.10 21.10 (Impish Indri)
    CPU: (4) x64 Intel(R) Core(TM) i5-4570S CPU @ 2.90GHz
    Memory: 5.43 GB / 23.32 GB
    Container: Yes
    Shell: 5.1.8 - /bin/bash
  Browsers:
    Chrome: 94.0.4606.61
    Firefox: 94.0
  npmPackages:
    @vitejs/plugin-vue: ^1.9.0 => 1.10.1 
    vite: ^2.5.10 => 2.6.14

Used Package Manager

yarn

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 https://github.com/vuejs/vue-next 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.