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