vue-loader: Source maps are not working for me

I see *.vue files in the source tree, but with content is generated by webpack (Google Chrome Version 47.0.2526.111 64-bit):

var __vue_script__, __vue_template__
__vue_script__ = require("-!coffee!./../../../../node_modules/vue-loader/lib/selector.js?type=script&index=0!./Total.vue")
__vue_template__ = require("-!vue-html-loader!./../../../../node_modules/vue-loader/lib/selector.js?type=template&index=0!./Total.vue")
module.exports = __vue_script__ || {}
if (module.exports.__esModule) module.exports = module.exports.default
if (__vue_template__) { (typeof module.exports === "function" ? module.exports.options : module.exports).template = __vue_template__ }
if (module.hot) {(function () {  module.hot.accept()
  var hotAPI = require("vue-hot-reload-api")
  hotAPI.install(require("vue"), true)
  if (!hotAPI.compatible) return
  var id = "/full/path/to/Total.vue"
  if (!module.hot.data) {
    hotAPI.createRecord(id, module.exports)
  } else {
    hotAPI.update(id, module.exports, __vue_template__)
  }
})()}


/*****************
 ** WEBPACK FOOTER
 ** ./app/components/cart/Total.vue
 ** module id = 27
 ** module chunks = 0 1 2 3
 **/

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 20 (3 by maintainers)

Links to this issue

Sourcemaps in .vue files are broken in development (#22322) · Issues · GitLab.org / GitLab · GitLab

Commits related to this issue

Workaround to get source maps work properly for vue components (see https://github.com/vuejs/vue-loader/issues/146) — committed to Darkside73/bbsmile.com.ua by Darkside73 8 years ago
good god source maps https://github.com/vuejs/vue-loader/issues/146#issuecomment-877869882 — committed to thecodewarrior/style-color-helper by thecodewarrior 3 years ago

Most upvoted comments

Invalid options in vue.config.js: "devtool" is not allowed 😭

Have to use

  configureWebpack: {
    devtool: 'eval-source-map',
  },

adamreisnz on May 16, 2019

??? HOW TO RESOLVE THIS ???

Invalid options in vue.config.js: "devtool" is not allowed 😭

HOW tO reSolVe THiS??? tHe sAme for ME !!!

VUEJS author ??? where are you? Dont close that …iiSUE

chriswang- on Jun 4, 2020

I narrowed down the problem. With default settings there are several files per each component in dev console:

App.vue
App.vue?a1b2
App.vue?ab12

One of it represents an actual source file. By adding devtoolModuleFilenameTemplate: '[resource-path]?[loaders]' option I’ve figured out that source with loader like ../~/vue-loader/lib/selector.js?type=script&index=0 is an actual source.

My workaround is pretty straightforward:

output: {
  devtoolModuleFilenameTemplate: info => {
    if (info.resource.match(/\.vue$/)) {
      $filename = info.allLoaders.match(/type=script/)
                ? info.resourcePath : 'generated';
    } else {
      $filename = info.resourcePath;
    }
    return $filename;
  },
}

Darkside73 on Jan 27, 2016

Aha, in 2.6.1 breakpoints don’t work anymore in Chrome with eval sourcemaps, the workaround is in 2.7 (backported from 3).

I had my script blackboxed in Chrome, after removing that I got it working with latest Chrome v60 + eval-source-map + Webpack v2.7.0. cheap- ones don’t map source correctly.

msokk on Aug 8, 2017

Same issue is reproduced in freshly installed app via vue-cli

Darkside73 on Jan 27, 2016