Browsers show incorrect line of error in source for .vue files #232

nolimitdev · 2018-07-24T16:19:35Z

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>

The text was updated successfully, but these errors were encountered:

nolimitdev changed the title ~~Sourcemap off by 1 line~~ Browsers show incorrect line of error in source for .vue files Jul 24, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Browsers show incorrect line of error in source for .vue files #232

Browsers show incorrect line of error in source for .vue files #232

nolimitdev commented Jul 24, 2018 •

edited

Loading

Browsers show incorrect line of error in source for .vue files #232

Browsers show incorrect line of error in source for .vue files #232

Comments

nolimitdev commented Jul 24, 2018 • edited Loading

index.html

main.js

item.vue

nolimitdev commented Jul 24, 2018 •

edited

Loading