Problem with sourcemaps

[gustavopch]

Repro: https://github.com/gustavopch/repro-vue-webpack-sourcemaps Instruction: run npm run serve and open localhost:8080.

// src/App.vue

<template>
  <p :someProp="this.doesnt.work1()"></p>
</template>

<script>
this.doesnt.work2()
export default {
  created() {
    this.doesnt.work3()
  },
}
</script>

When the error happens inside the <script> but outside of the Vue object, the console correctly shows that the error happened at App.vue:6.

When it happens inside the Vue object (in the created method in this case) or in the template, the error in the console doesn't point to App.vue, but to the webpack bundle which is not as readable as the previous case.

Am I doing something wrong? I would like all errors to be mapped to the *.vue file, not to the bundle.

[kazupon]

In my Google Chrome, correct souce mapped. What do you use the browser for your development?

IMO, In the development, I recommend use the Google Chrome due to sophisticate. 😉

[jbruni]

I'm also having problems with source maps right now, using Webpack 2 + latest vue + vue-loader + Webpack Dev Server...

...I have another app using Webpack 1 and previous vue / vue-loader / webpack-dev-server where I do not have issues (the source maps brings me to the precise .vue file line). I'm using Chrome.

Sorry I don't have better information to offer right now. I just did a search for vue-loader/sourcemaps trying to find something... and found this recent GH issue.

I tried distinct Webpack configurations for devtool.

@kazupon - are you using latest webpack-dev-server version, which has been recently released?

[kazupon]

@jbruni

• are you using latest webpack-dev-server version, which has been recently released?

I used the below version.

$ npm ls --depth=0 | grep webpack-dev-server
├── webpack-dev-server@2.3.0

[gustavopch]

@kazupon I'm using Google Chrome Version 55.0.2883.87 m (64-bit). Did you clone the linked reproduction and tried to see if the problem happens to you too? Maybe my webpack config is missing something.

[kazupon]

@gustavopch

Did you clone the linked reproduction and tried to see if the problem happens to you too?

Yes, I tried to reproduce your providing repo.

[gustavopch]

@kazupon Only one error is being thrown at a time. You must remove the other two to see the one that remains. Could you comment out the 6th line and try again? The error that will be thrown will be the one caused by this.doesnt.work3(). It will probably be mapped to the bundle instead of the .vue file.

[kazupon]

@gustavopch I tried to reproduce again. Hmm, I could not reproduce ... 🤔

[jbruni]

It seems it is a Chrome + Webpack issue: https://github.com/webpack/webpack/issues/3165

This explains why it can't be reproduced. The question to make is: which OS and version of Chrome are you using?

The issue is so well-know that it is linked from the a highlighted box in the Webpack documentation: https://webpack.js.org/configuration/devtool/

[ghost]

Anybody know if this issue is still active? Other threads I've read on webpack repo seem to indicate that 2.3.2 should have fixed some things, but I'm still running into horrendous sourcemap issues on webpack 2.4.1.

[e-sana]

Also having problems with the breakpoints on the latest webpack generated with vue-cli

[stianl]

Same issues here after upgrading to webpack 2. Breakpoints are only working on some lines.

When invoked with the -d option the default type of source maps generated with webpack-dev-server 1.15.1 (used with webpack 1) was sourcemap, in the newer versions this has changed to eval-cheap-module-source-map. If I specify source-map as the devtool option breakpoints works as expected again.

As a side note; the default --devtool option webpack-dev-server uses (eval-cheap-module-source-map) when using -d is not listed as a configuration value for devtool in webpack's documentation.

Version:

$ webpack-dev-server -v
webpack-dev-server 2.4.5
webpack 2.5.1

[ghost]

Thanks for that info, I have also found that cheap-module-source-map works for me in chrome, which is somewhat better performance in build times than source-map.

Cheers guys.

[layanto]

Maybe related to this https://github.com/Microsoft/vscode-chrome-debug/issues/430 Unable to debug vuejs app with vscode and chrome-debug extension because source files in different directories have the same sourcemap webpack:/// path pattern. As such, vscode cannot locate the source file.

[gustavopch]

@layanto It's not specific to VSCode. I don't use it.

[layanto]

VSCode is using Chrome debug, so exactly the same as in Chrome. If not working in chrome also will not work in VSCode. The issue in https://github.com/Microsoft/vscode-chrome-debug/issues/430 is because source files in different locations have the same webpack path, so VSCode/Chrome debug can't find the source file.

[isometriq]

@layanto I confirm also something is wrong with generated sourcemaps Exactly same for me, but in phpstorm https://github.com/vuejs/vue/issues/6316 https://github.com/JeffreyWay/laravel-mix/issues/1102

[isometriq]

If my original source *.vue file in my project is in lets say: resources/assets/js/components/Example.vue

Then the convention for IDE use a chrome remote debugging, expect the source code (original same that is in the IDE) to be in: webpack://./resources/assets/js/components/Example.vue

When using Chrome devtool, we can confirm this is not the case ..the original is in: webpack://Example.vue and other files are also in the original location: webpack://./resources/assets/js/components/Example.vue webpack://./resources/assets/js/components/Example.vue?cf83 (its a random prefix) ..but these copies are not the correct source, they are the generated code for ES2015 and hot reloading i think.

Because of this breakpoints do not work correctly

In Chrome placing breakpoints in: webpack://Example.vue does work, but the sourcemaps path is still incorrect and it causes issues as described above.

I think the issue is really from vue-loader

[isometriq]

My workaround for breakpoints in IDE is using JS files import in the .vue file ...or stop using .vue files

[pwang2]

@isometriq could you help elaborate your workaround? do you mean using script tag to include the javascript in .vue file?

[martinandersen3d]

i guess he means this

Finally figured this out, if anyone cares.
In my .vue file I have my <template></template>. Immediately following that:
<script lang='ts'>
      import myModule from './myModule.ts'
      export default myModule
</script>

quoted from

https://www.reddit.com/r/vuejs/comments/5zjrxe/debugging_vue_in_vscode/

We really need a full blown tutorial of how to set this up.. soon :D Hope someone can figure this out :)

[pwang2]

Thank you for your reply. I will try to see if it works.

Definitely something is wrong here with sourcemap. The .vue?5gc file is useless and should not be there.

[martinandersen3d]

For some reason it doenst looks like this tip have been shared here - insert the debugger; (including semicolon ; )

 methods:{  

      onFunkyDance (file, response) {
        debugger;
       var a=1;
       var b = a+5;
        var c = b+5
        console.log('A file was successfully uploaded:')
        console.log(file);
        console.log(response);
        debugger;
      }
  },//methods

this will allow chrome to show debugging breakpoints

============= IMPORTANT: as far as i understand at the moment you need vetur installed for vscode,for this debugging; statement to work - link https://marketplace.visualstudio.com/items?itemName=octref.vetur

[isometriq]

You are correct @martinandersen3d This is what I meant and with this I was able to use breakpoints in IDE.

But used JS files alone with template: '...' because in my case I needed to modify template with javascript code. Breakpoints in IDE also works with this

[isometriq]

@martinandersen3d the issue was with breakpoints in IDE as inside Chrome browser it works already. Does debugger; works when using an IDE ?

[martinandersen3d]

I have tried this, but doesn't work correctly: I'm still "fooling" around.. and maybe i don't understand actually what an IDE is.. but

you need to setup some stuff in the vscode launch.json.. i'll paste mine here with all errors I've made. You also need to install microsoft chrome thing i put the link https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

{
    "version": "0.2.0",
    "configurations": [

        {
            "type": "node",
            "request": "launch",
            "name": "Launch Vue",
            "program": "${workspaceRoot}/build/dev-server.js",
            "cwd": "${workspaceRoot}"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Process",
            "port": 12424

        },
        {   //https://github.com/Microsoft/vscode-chrome-debug/issues/357
            "type": "chrome",
            "request": "launch",
            "name": "x Launch Chrome against localhost",
            "url": "http://localhost:8080/",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "sourceMapPathOverrides": {
                "webpack:///*": "${workspaceRoot}/src/*"
            },
            "trace": true
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "x Attach to Chrome",
            "port": 9222,
            "url": "http://localhost:8080/*",
            "webRoot": "${workspaceRoot}",
            "sourceMapPathOverrides": {
                "webpack:///*": "${workspaceRoot}/src/*"
            }
        }
    ]
}

other links https://forum.vuejs.org/t/debugging-vue-files-with-visual-studio-code/8022 https://medium.com/@auchenberg/introducing-simultaneous-nirvana-javascript-debugging-for-node-js-and-chrome-in-vs-code-d898a4011ab1

webpack settings here http://webpack.github.io/docs/build-performance.html#sourcemaps

change some stuff in, this file under: devtool: '#cheap-module-eval-source-map', build/webpack.dev.conf.js

The # can be excluded if you use webpack 2.. well i'm still confused and don't have it working probably. Sorry for my spelling, in a rush.

search source map https://code.visualstudio.com/docs/nodejs/nodejs-debugging

[isometriq]

Yes by IDE i mean this: https://en.wikipedia.org/wiki/Integrated_development_environment ..and vscode is one example

I can see in the links that debugger; (even without sourcemap overrides when using vetur) works in vscode.

I use another IDE: phpstorm. Maybe the debugger; works too with this one...

[martinandersen3d]

Ohh.. maybe a little extra tip instead of import/export... you can use

<template>
<div>

</div>
</template>

<style scoped>

</style>
<script src='./page.js'>     <---- HERE
</script>

source / read more: https://vue-loader.vuejs.org/en/start/spec.html

page.js

export default {

  data () {
    return {
      msg: 'Hello world!'
    }
  },
  computed: {
     beAwesome() {
       return this.msg
     }
  }//computed
}

I'm not shure if there is anything i've overlooked?

[isometriq]

Yes, this works, similar to discussed above: https://github.com/vuejs/vue-loader/issues/620#issuecomment-324658797

It's really when code is inside the <script> tag of the .vue file that it doesn't work, because of the generated sourcemaps.

[martinandersen3d]

Some news in newest chrome version if you missed https://developers.google.com/web/updates/2017/10/devtools-release-notes?utm_campaign=chrome_series_chrome63blog_112917&utm_source=chromedev&utm_medium=yt-desc#multi-client

[asolopovas]

Any news on this issue. Its real pain in the ass this ?123 attached to end of vue files.

[martinandersen3d]

Working answer here - Vscode + Vetur.. and a little bit of setup: https://github.com/vuejs/vetur/issues/201#issuecomment-357868668

[asolopovas]

what if I work in phpstorm?

[martinandersen3d]

dont know :(

[elijahiuu]

My line numbers have always been off in Chrome when using vue-loader. I have tried every devtools option. I have tried with