Vue + Typescript produces wrong SourceMaps and prevents correct debugging in vscode

Version

4.5.13

Reproduction link

https://github.com/bromix/vue3-sourcemaps-not-working

Environment info

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-4910MQ CPU @ 2.90GHz
  Binaries:
    Node: 12.22.1 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.12 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 90.0.4430.212
    Edge: Spartan (44.19041.964.0), Chromium (90.0.818.62)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.0.6
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.13
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  4.5.13
    @vue/cli-plugin-babel: ~4.5.13 => 4.5.13
    @vue/cli-plugin-eslint: ~4.5.13 => 4.5.13
    @vue/cli-plugin-pwa: ~4.5.13 => 4.5.13
    @vue/cli-plugin-router: ~4.5.13 => 4.5.13
    @vue/cli-plugin-typescript: ~4.5.13 => 4.5.13
    @vue/cli-service: ~4.5.13 => 4.5.13
    @vue/cli-shared-utils:  4.5.13
    @vue/compiler-core:  3.0.11
    @vue/compiler-dom:  3.0.11
    @vue/compiler-sfc: ^3.0.11 => 3.0.11
    @vue/compiler-ssr:  3.0.11
    @vue/component-compiler-utils:  3.2.0
    @vue/devtools-api:  6.0.0-beta.10
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/reactivity:  3.0.11
    @vue/runtime-core:  3.0.11
    @vue/runtime-dom:  3.0.11
    @vue/shared:  3.0.11
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.9.0 => 7.9.0
    typescript: ~4.2.4 => 4.2.4
    vue: ^3.0.11 => 3.0.11
    vue-eslint-parser:  7.6.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.7 (16.2.0)
    vue-router: ^4.0.8 => 4.0.8
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: 4.5.13

Steps to reproduce

For Vue v3 change to the “vue3app” directory and then run the following commands.

npm install
npm run serve
code .

In Visual Studio Code just start the debugger with F5 and then click on one of the buttons.

What is expected?

That the breakpoints jump to the right place in the code.

What is actually happening?

Either nothing happens (if a breakpoint is set) or the debugger jumps to the wrong place (if debugger statement is used).

---

For a direct comparison, I have attached the same project with Vue v2 (everything works there).

I describe the case here in more detail, because we are working on a large project for about a year. We use Vue v2, Vuetify and Composition API. We use only TypeScript (we have additional experience with C/C , Python and C#/dotnet and are used to work with a debugger for more complex errors). We have prepared everything thanks to the Composition API addon for Vue v3 and now in the first tests we found that we can’t debug properly.

If there is anything further I can try or test, just give me instructions. Currently, my guess is that the source maps are not being created correctly. But only if TypeScript is used. In pure JavaScript there are no problems, but this is not reasonable from a certain size of project.

[whrami]

I am curious why more people are not +1’ing this issue. I have never had any success debugging Vue3 composition API, with Typescript, in VSCode. It is substantially broken.

[bromix]

Here are the screenshots that are also included with the sample project with description.

wrong file

source-map not the same as with vue v2