Vue Typescript Sourcemaps

[stevethedev]

Version

4.7.2

Reproduction link

https://github.com/stevethedev/rollup-vue-typescript

Steps to reproduce

1. Clone the repo: git clone https://github.com/stevethedev/rollup-vue-typescript
2. Install the dependencies: npm install
3. Launch the server: npm run start
4. Open the server in a browser window (localhost:8080)
5. Check the sourcemap for with-script-typescript.vue

What is expected?

The SourceMap allows a breakpoint to be inserted at Line 12.

What is actually happening?

A breakpoint can only be inserted at lines 1, 3, 6, 7, and 9.

---

Changing the script lang tag from "ts" to "js" causes the SourceMap to behave as expected.

[gmoneh]

Having the same problem. Was going to open an issue for this but saw I’m not the only one.

[danielvy]

This happens in rollup-plugin-vue v5.0 as well.

Looks like the problem is with the generated source maps. Running the transpiled js + sourcemap through a visualizers shows that mapping is generated only for a small portion of the code. All inner code inside the objects passed to Vue is ignored in the source map.

Not sure if this is a problem with rollup-plugin-vue or with the typescript compiler.

Anyway, wasted too much time on this, back to console.logs (seems like it's 20% actual coding and 80% dealing with configuration and debugging the toolchain).

[danielvy]

Did a little more investigating.

I was able to work around this by setting needMap to false in the vue plugin's options. Since the typescript plugin is generating the source maps anyway.

This option is not documented anywhere in vue plugin's options and only mentioned in the referenced component-compiler-utils but for some odd reason needs to be passed to the vue plugin directly.

vue({ needMap: false })

This made the source maps generated correctly again and debugging works inside .vue components.

So it does look like a bug in rollup-plugin-vue.

[gmoneh]

You're a genius, dude. That worked. It still gives a weird name for the script (adding ?rollup_plugin blah blah blah to the path), but the important thing is that it's now possible to debug.
Thanks much!

[danielvy]

@gmoneh

It has weird names because this is how rollup-plugin-vue extracts the different parts from the *.vue files (template, script, style) and then feeds them back to rollup as imports so they can be processed by other plugins. You can handle the extracted *.ts then as you like with other plugins, group them together, etc.

I wonder what's the status of this project. This bug is over 2 months old and no one paid it any attention.

[d9k]

@danielvy,

where can I put { needMap: false } in vue.config.js?

[danielvy]

@d9k

where can I put { needMap: false } in vue.config.js?

This option is passed to rollup-plugin-vue when it's created in rollup's config. I don't think rollup-plugin-vue interacts with vue.config.js.