Skip to content
This repository has been archived by the owner on Jan 18, 2022. It is now read-only.

cannot mark breakpoints in chrome within the bundled script #248

Open
scrollbar-ww opened this issue Dec 10, 2018 · 9 comments
Open

cannot mark breakpoints in chrome within the bundled script #248

scrollbar-ww opened this issue Dec 10, 2018 · 9 comments
Labels
Priority: Low Status: Available Type: Enhancement
Milestone
Zero Issues

Comments

@scrollbar-ww
Copy link

scrollbar-ww commented Dec 10, 2018 •
edited
Loading

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
Copy link

sliekens commented Dec 28, 2018 •
edited
Loading

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

@sliekens sliekens mentioned this issue Dec 28, 2018
Merged
@scrollbar-ww
Copy link
Author

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
Copy link
Author

4.4.0 is not well yet

@scrollbar-ww
Copy link
Author

scrollbar-ww commented Jan 11, 2019 •
edited
Loading

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
Copy link
Member

znck commented Jan 14, 2019 •
edited
Loading

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

@znck znck added this to the Version 4.7 milestone Jan 14, 2019
@znck znck removed this from the Version 4.7 milestone Nov 21, 2019
This was referenced Nov 21, 2019
Closed
Closed
@zouyaoji
Copy link

zouyaoji commented Dec 8, 2019

+1 Ran into this issue as well,
image

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

@lachlanmcdonald
Copy link

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
Copy link

rspeed commented Jan 18, 2020

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

@pioug
Copy link
Contributor

pioug commented Jul 20, 2020 •
edited
Loading

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:

image

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

@pioug pioug mentioned this issue Jul 22, 2020
Merged
@znck znck added this to the Zero Issues milestone Oct 22, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Priority: Low Status: Available Type: Enhancement
Projects
None yet
Milestone
Zero Issues
Development

No branches or pull requests
7 participants
@rspeed @lachlanmcdonald @sliekens @znck @pioug @zouyaoji @scrollbar-ww