after upgrade from vue2 to vue3, breakpoint in VSCode stops working if typescript is used in SFC

[lydev]

Version

3.2.19

Reproduction link

github.com

Steps to reproduce

You can bypass step 1 to 3 if you open project vue3-proj-02 from https://github.com/lydev/public-demo.git.

1. vue create . Enable typescript and choose vue3 in the wizard.
2. Enable source map by creating vue.config.js:

module.exports = {
configureWebpack() {
return {
devtool: "source-map",
};
},
};

3. Create .vscode/launch.json:

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///./": "${webRoot}/"
},
"skipFiles": ["${workspaceFolder}/node_modules/**/*"]
}
]
}

4. Yarn serve;
5. Open project in VSCode. Open "src/components/HelloWorld.vue" and set a breakpoint at line "export default class HelloWorld extends Vue".
6. F5 start debugging.

What is expected?

Chrome launches, line 42 is hit in VSCode.

What is actually happening?

Line 9 is hit. That's incorrect.

---

This only happens in Vue3, but Vue2.
This only happens if you have "lang=ts" enabled in SFC.

I think the problem is when compiler moves the TS script to a new file, it simplely put the script at line 1. It doesn't respect the fact that <script> actually is after in the original .vue file. In Vue2, the compiler adds extra blank lines to ensure the code has the same line number. Unfortunately, Vue3 doesn't have these blank lines.

[mnorthern2]

Someone wrote an article on this that offers a solution, albeit a very intricate one:
https://ckhconsulting.com/vue-typescript-debuggers/#correct-source-map

Note that it only works for Vue CLI 4, and it needs to be altered for Vue CLI 5. However, the altered version (or at least the one I wrote) doesn't work when using <script setup lang="ts"> either.

Any updates on this to help fix the issue completely?

[mnorthern2]

To add to my previous comment, it seems using the script setup syntax also has a line offset issue. However, unlike the normal TS compilation problems, the offset seems to vary from component to component, making it unpredictable such that the solution I linked doesn't work. Even when I set the offset to test a single component, however, it still seems to jump to random spots after the initial setup() script has run (e.g. I had an onMounted() hook and a watch(), but each time the watch() was triggered it would jump to the onMounted() function a few lines down instead).

[Shujee]

Struggling with the same thing. I have followed the above article and have succeeded for the most part, but when it comes to script setup, it behaves strangely.

If I create a new Vue CLI 5 + TS project and define the following template/script in my vue file:

<template>
<button @click="updatecount">{{ count }}</button>
</template>
<script setup lang="ts">
import { ref } from "vue"; 
let count = ref(0); 

function updatecount() { 
	count.value++; 
	console.log("updated"); 
}
</script> 

and place breakpoint on count.value++ line, the breakpoint gets hit as soon as I refresh the page, but not on actual click, even when the count is updated.