Vue + Typescript produces weird sourcemaps => prevents debugging in WebStorm

[vi34]

Version

4.5.8

Reproduction link

https://github.com/vi34/Vue-ts-sourcemap-issue

Environment info

  System:
    OS: macOS 10.15.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 15.0.1 - /usr/local/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 7.0.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 86.0.4240.111
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.4.5 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.5.8 
    @vue/cli-plugin-babel: ~4.4.0 => 4.4.5 
    @vue/cli-plugin-eslint: ~4.4.0 => 4.4.5 
    @vue/cli-plugin-router:  4.5.8 
    @vue/cli-plugin-typescript: ~4.4.0 => 4.4.5 
    @vue/cli-plugin-vuex:  4.5.8 
    @vue/cli-service: ~4.5.8 => 4.5.8 
    @vue/cli-shared-utils:  4.5.8 
    @vue/component-compiler-utils:  3.2.0 
    @vue/eslint-config-typescript: ^5.0.2 => 5.0.2 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^6.2.2 => 6.2.2 
    typescript: ~3.9.3 => 3.9.5 
    vue: ^2.6.11 => 2.6.11 
    vue-class-component: ^7.2.3 => 7.2.3 
    vue-eslint-parser:  7.1.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.5 (16.0.0-beta.10)
    vue-property-decorator: ^8.4.2 => 8.5.1 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.5.8

Steps to reproduce

(Do 1-4 or just clone the repo)

1. Create Vue-cli project
2. Add Typescript (vue add typescript)
3. Add several vue components.
4. 'vue.config.js': config.devtool = 'eval-source-map'

After 1-4 steps, there is the following structure:

• src/App.vue
• src/components/Foo.vue
• src/components/HelloWorld.vue

5. yarn run serve
6. open devtools -> Sources tab

What is actually happening?

Produced sourcemaps point to several scripts with the same name as the original.

Original scripts are highlighted in red.

So we have following scripts:

webpack:///./src/components/Foo.vue?01c8
...
webpack:///./src/components/Foo.vue?7b10
webpack:///./src/components/HelloWorld.vue?1d82
webpack:///./src/components/HelloWorld.vue?22d9
...
webpack:///./src/components/HelloWorld.vue?f177
webpack:///./src/App.vue?ec60
...
webpack:///./src/App.vue?f00e
webpack:///src/components/Foo.vue?36b5

For every vue component, there is a bunch of scripts Component.vue?xxxx and only one of them contains original source code.

There is no way for the debugger to know which of the scripts contains original source.
As you can see Foo.vue has a different path from other components. src/components/Foo.vue vs ./src/components/HelloWorld.vue

Depending on the devtool option, the presence of the hashcode in the name and the path to the original scripts may change, so the debugger can't rely on them to distinguish the original scripts.

What is expected?

The debugger needs a way to distinguish original scripts from others. So there could be several possible options to do so (starting from the most preferable option):

1. Only one script in sourcemaps with the original name for each component. (Without any additional '?xxx' scripts)

2. Original scripts are clearly separated from other scripts by path or name

3. Original scripts are guaranteed to be the last to load

---

I work on debugger in the WebStorm team. And this issue blocks us from making support of debugging vue ts projects.

We investigated different tips and workarounds which were suggested in similar issues. But none of them works reliably.

[fangbinwei]

for script lang="js", vue-loader generate sourcemap which contain template,script, style, and then babel-loader handle this inputSourceMap. The output is webpack:///src/components/Foo.vue?36b5 (sourceRoot is src/component)

for script lang="ts", ts-loader generate its own sourcemap without using the sourcemap provided by vue-loader. Then babel-loader handle the sourcemap from ts-loader. The output is webpack:///./src/components/HelloWorld.vue?xxx.

Intuitively, I think it might be helpful If using @babel/preset-typescript instead of ts-loader,

related issue: #2978

[fangbinwei]

I fork a repo, and use @babel/preset-typescript instead of ts-loader. Do you think it's better than before?

[vi34]

I checked the forked project, and yes it is better.
Source files are located in one directory webpack:///src/ and their content equals the content of files on the disk, so the debugger could match them.

[vi34]

Any progress on this issue?

[matulek]

Happens to me too on project created using @vue/cli@4.5.13. Also cannot debug on VS Code and can't place breakpoint in neither Firefox, nor Chrome.
This is not the case in pure .ts files, only .vue single file components.

Edit: I've created repository with basic project affected by this bug as it is a little bit different than the original one.
In developer tools there are files with suffixes visible, but also I can see the original ones but I can't place any breakpoints.
Also only .vue files are affected, I can see single main.ts file and breakpoints there work, so it may be related to vue-loader.
I've discovered that changing devtool: source-map to devtool: eval-source-map causes original .vue files to disappear in developer tools but does not affect .ts files in any way.
This buggy behaviour seems to be consistent in firefox and chrome browsers.
Repo: https://gitlab.com/matul/vue-sourcemaps-bug

@fangbinwei solution doesn't seem to work in my case (but maybe I've done something wrong).

Edit2: Happens also on fresh project created with @vue/cli@next (5.0.0-beta-2) with Babel + TypeScript :(.