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

[bromix]

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.

[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

[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.

[taosher]

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.

+1, exactly the same.

and I am curious about this too.

[hamstreet]

I, too, wonder why more people haven't asked about this issue. This excellent article, with some minor changes and customizations, got me to a working solution:

Vue + TypeScript & Debuggers

[avenmore]

@hamstreet Probably because I'm using vue-cli v5.0.0-beta.7, no App.vue(?xxxx) in the Chrome source tab has the template/script tags, so that article got off to a bad start. I guess I'll have to keep dreaming of the day when I can set a breakpoint in VSCode rather than littering debugger; statements everywhere.

[avenmore]

Link to issue #11023, Generate distinct paths for supporting .vue files in sourcemaps.

[filimon-danopoulos-stratsys]

I, too, wonder why more people haven't asked about this issue. This excellent article, with some minor changes and customizations, got me to a working solution:

Vue + TypeScript & Debuggers

@hamstreet Care to share your changes? I figured out I had to change _sourceMap to _sourceMapAsObject but had no more time to spend on it after that.

[onurusluca]

Still having this problem. I spent 4 hours on this. Are the any workaround or fix?

[deisner]

@onurusluca I finally got this working. The information in this comment was the holy grail. I also wrote-up my experience in a later comment.

If that issue is ever closed, hopefully the workaround won't be needed. But it works for now.

[stevehurcombe]

I've tried in vain to get this working with no joy, even with andrewmackrodt's hard work.

This is Vue 3.

[qbunia]

Workaround from this https://github.com/vuejs/vue/issues/11023#issuecomment-789137369 works for me. I`m able to debug vuejs in Chrome.

I`m waiting for this issue to be resolved.