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
├── [email protected]

[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: webpack/webpack#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
vuejs/vue#6316
laravel-mix/laravel-mix#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:
#620 (comment)

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:
vuejs/vetur#201 (comment)

[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 and with , moved to the bottom of *.vue file... just to see what actually offsets the lines. It doesn't help.

However, if my *.vue file has a child component written in plain js, that child component has a perfect sourcemap - lines match up to original source.

[elijahiuu]

apparently i didn't try all combinations. here are my notes on how this works and doesn't:

// devtool: 'source-map', // .vue is off by a line or 2. <template>, <style> sections are visible. file structure is clean
// devtool: 'cheap-eval-source-map', // .vue lines are accurate. <template>, <style> are not visible. Lots of weird duplicate files, with ?ffcc, ?ddaa, etc. in the suffix.
devtool: 'cheap-module-eval-sourcemap', // .vue lines are accurate, <template>, <style> sections are visible. But file structure is messed up, the actual debuggable js is in root directory, not in its subfolder where it is in actual source.

[leoyoung07]

in my project, upgrade babel-core to [email protected], SourceMaps work well.

[caseymarquis]

The fundamental issue that I'm still having is that the .vue source maps are not placed in a directory structure which matches their original location:

Ideally, the .vue components shown above would be in webpack://app/original/location.vue

This would allow debugging from editors such as vscode using chrome remote debugging, as they can then figure out which system files match which source maps.

The work around is just using the built in chrome debugger which has been working pretty flawlessly for years in my experience, so this is just a convenience in my case.

[gnclmorais]

@elijahiuu’s tip works, seems to improve source maps for us 🙇🏻‍♂️Thanks!

[Cactusx09]

Glad to tell that @elijahiuu's tip works for me with Laravel project.
I have tried a lot of configs and sourceMapParhOverrides combinations and vscode debug works for me such a regular devtools breakpoint (but in vscode) only in case i write debugger in my code (vscode red dot breakpoints not working).

I tried too several config for webpack.mix.js such as devtool: 'source-map', but only
cheap-module-eval-sourcemap working properly with my Laravel project!

Here is my debug config:

{
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost",
      "webRoot": "${workspaceFolder}/public",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
            "webpack:///resources/js/*.vue": "${workspaceFolder}/resources/js/*.vue",
            "webpack:///./resources/js/*.js": "${workspaceFolder}/resources/js/*.js",
             "webpack:///./node_modules/*": "${workspaceFolder}/node_modules/*"
       },
},