Browsers show incorrect line of error in source for .vue files #232
Description
Browsers show incorrect line of error in source for .vue files. It is incorrect for one line. See very simple example below. All files are stored in root for this example. Im using latest versions of browserify, vue and vueify.
Create files manually as listed below (or download ready to use app) and run commands:
$ npm install -g browserify
$ npm install vue vueify babel-core babel-preset-es2015 babel-plugin-transform-runtime
$ browserify --debug -t vueify -e main.js -o build.js
Open app in web browser and in console run:
main.test()
... Uncaught ReferenceError shows correct line causing error: console.log(sthUndefined);
item.test()
... Uncaught ReferenceError shows incorrect line causing error: test : function() { instead of console.log(sthUndefined);
So lines from main.js are correct in source maps (so browserify does it job fine) but lines from .vue file are incorrect. When I remove <style> section from item.vue then browser show error at correct line. So I think there is a some problem with vueify and style section. Moving style section after template or after script did not solve this issue.
index.html
<!doctype html>
<html>
<head>
<title>Test vueify source map incorrect line bug</title>
</head>
<body>
<div id="item"></div>
<script src="build.js"></script>
</body>
</html>main.js
var Vue = require('vue');
var Item = require('./item.vue');
new Vue({
el: '#item',
render: function (createElement) {
return createElement(Item)
},
created : function() {
window.main = this;
},
methods : {
test : function() {
console.log(sthUndefined);
}
}
})item.vue
<style>
.red { color: #f00; }
</style>
<template>
<h1 class="red">Test vueify source map incorrect line bug</h1>
</template>
<script>
export default {
created : function() {
window.item = this;
},
methods : {
test : function() {
console.log(sthUndefined);
}
}
}
</script>