Version

3.0.5

Reproduction link

https://github.com/andrewmackrodt/compiler-sfc-bug-repro

Steps to reproduce

Using .vue files in Vue 3 TS projects results in source maps with incorrect leading newlines. This causes line numbers to be incorrect and causes breakpoints in IDEs to not function. The minimal reproduction project uses a single component to demonstrate this issue.

Run yarn serve after cloning the repository and browse to http://localhost:8080. Open your browser's console and click on the "Print console logs and trigger debugger" button. The console.log statements should be logged as lines 14 and 16. For further proof this is problematic, attach a debugger using an IDE and repeat the test. The component contains a debugger statement on line 15, however, the IDE will break at line 9.

Observations: this is the same amount of white space before the start of <script>. Vue 2 and vue-template-compiler are able to generate the TS Component with the correct line numbering. Please see this comparison generated using IDEA: https://imgur.com/gallery/yVX8CaA.

What is expected?

An IDE should break at the line containing the debugger statement and the console.log statements should reflect the original line number.

What is actually happening?

The debugger "attaches" too early in the file and the console.log statements also have the same negative line number offset. In the case of this example, it is 6 lines.

This is especially problematic for breakpoints set within an IDE as the debugger will appear to trigger at the wrong line, if it triggers at all.

This should be a vue-loader's issue, tracked in https://github.com/vuejs/vue-loader/issues/1778