vue-loader: Problem with sourcemaps

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.

About this issue

Original URL
State: open
Created 7 years ago
Reactions: 14
Comments: 39 (4 by maintainers)

Links to this issue

Most upvoted comments

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.

+17

elijahiuu on Feb 8, 2018

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 on Aug 8, 2017

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.

caseymarquis on Jan 15, 2019

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/*"
       },
},

Cactusx09 on Dec 29, 2019

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

isometriq on Aug 8, 2017

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

stianl on May 9, 2017