Rollup-plugin-vue: cannot mark breakpoints in chrome within the bundled script

Created on 10 Dec 2018 · 9Comments · Source: vuejs/rollup-plugin-vue

app.vue

<template>
  <div class="title">
    <a @click="click">{{ title }}</a>
  </div>
</template>

<script>
  export default {
    data () {
      // can't put breakpoint below
      return {
        title: 'hello human !'
      }
    },
    methods: {
      click () {
        console.info(this.title, 'clicked')  // can't put breakpoint here
      }
    }
  }
</script>

index.js

import App from './app.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Example</title>
</head>
<body>
  <div id="app"></div>
  <script type="text/javascript" src="lib\vue\vue.runtime.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
</body>
</html>

rollup.config.js

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/app.js',
    format: 'iife',
    sourcemap: true
  },
  plugins:[
    vue()
  ]
}

packages version

rollup: 0.67.4
rollup-plugin-vue: 4.3.2
vue-template-compiler: 2.5.19
vue: 2.5.19

Low Available Enhancement

Source

scrollbar-ww

Most helpful comment

Why is this labeled as "enhancement"? It's clearly a bug.

rspeed on 18 Jan 2020

👍5

All 9 comments

Same problem here, Chrome pauses on

export default {

... instead of the actual breakpoint.

There's no way to step-into code that I wrote.

Edit: fixed with a rollback to [email protected]

This issue seems to be related to whatever is causing #238

StevenLiekens on 28 Dec 2018

thanks.
rollback to 4.2.0 is ok,
a source file named "app.vue?rollup-plugin-vue=script.js" be at the source tree, and breakpoints can work.
but breakpints within "app.vue" still not ok.

scrollbar-ww on 29 Dec 2018

4.4.0 is not well yet

scrollbar-ww on 11 Jan 2019

it caused by the code in "load" hook:

    load(id: string) {
      const request = parseVuePartRequest(id)

      if (!request) return

      // -> "@vue/component-compiler-utils.parse" gen invalid script.map @descriptors
      const element = resolveVuePart(descriptors, request)
      const code = 'code' in element
        ? ((element as any).code as string) // .code is set when extract styles is used. { css: false }
        : element.content
      const map = element.map as any

      // -> if just return code, will be better
      return { code, map }
    },

scrollbar-ww on 11 Jan 2019

I think, there's some bug in rollup source-map merging. vue file source-map and merged output source-map

znck on 14 Jan 2019

+1 Ran into this issue as well,

Rolling back to v4.2.0 solves the problem...

zouyaoji on 8 Dec 2019

Is it possible to get an update on this issue, as the previous working version is over 2 years old?

Or, maybe more helpfully, an ideal example of a _rollup-plugin-vue_ configuration for the ^5.0.0 with source-maps as base-line for further diagnosis?

(removed my previous comment as it stated incorrectly that this issue was not present on v4.7.2)

lachlanmcdonald on 12 Dec 2019

Why is this labeled as "enhancement"? It's clearly a bug.

rspeed on 18 Jan 2020

👍5

I updated the test case with the latest version of each dependency issue-rollup-plugin-vue-5.1.9.zip. It is still reproducing.

  "devDependencies": {
    "rollup": "2.22.1",
    "rollup-plugin-vue": "5.1.9",
    "vue-template-compiler": "2.6.11"
  },
  "dependencies": {
    "vue": "2.6.11"
  },

I also face the error Multiple conflicting contents for sourcemap source when using the v6.0.0 and Vue 3. And I could not find a similar workaround as needMap: false in this version 💦

I started to debug but I can't figure out the root problem. Can someone give some pointers maybe?

https://github.com/rollup/rollup/blob/0ffbe94981a1201da851eb6001cce7bb5b8efb20/src/utils/collapseSourcemaps.ts#L79-L86

 } else if ( 
    traced.source.content != null && 
    sourcesContent[sourceIndex] !== traced.source.content 
 ) { 
    return error({ 
        message: `Multiple conflicting contents for sourcemap source ${traced.source.filename}` 
    }); 
 }

Update: Well, the solution was in the error the message 😅 Sourcemaps are generated separately for template + style + script but the source.filename is always the same, hence the "conflict".
I am not expert with sourcemaps, I am wondering if we can append a query parameter ?type=script without any side effects: