cannot mark breakpoints in chrome within the bundled script

scrollbar-ww commented 5 years ago

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

sliekens commented 5 years ago

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 rollup-plugin-vue@4.2.0

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

scrollbar-ww commented 5 years ago

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 commented 5 years ago

4.4.0 is not well yet

scrollbar-ww commented 5 years ago

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 }
    },

znck commented 5 years ago

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

zouyaoji commented 4 years ago

+1 Ran into this issue as well,

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

lachlanmcdonald commented 4 years ago

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)

rspeed commented 4 years ago

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

pioug commented 4 years ago

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:

It fixes my simple "rollup -c -w" case.

vuejs / rollup-plugin-vue