Source maps are not working for me

[Darkside73]

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
 **/

[yyx990803]

Reproduction please. Make sure you've set the devtool option in your webpack config.

[Darkside73]

I've set devtool option to eval-source-map. But problem was in other related options:

output: {
    devtoolModuleFilenameTemplate: '[resource-path]',
    devtoolFallbackModuleFilenameTemplate: '[resource-path]?[hash]'
}

If I remove this options, source maps start working as expected. It seems the original sources been replaced by generated files

[Darkside73]

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;
  },
}

[yyx990803]

Great it works out for you. I don't think there's much on vue-loader's end I can do to mitigate this, but feel free to reopen if you believe there is.

[Darkside73]

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

[yyx990803]

@Darkside73 I can't reproduce... please list your OS and npm list info.

[Darkside73]

https://gist.github.com/Darkside73/269f4e1439e0ffebb071

[Ivan-Feofanov]

Hi. I also have a problem with sourcemaps.

I tried all webpack devtools, but result was the same

Code with error:

<template>
  <div id="app">
    <div class="wrapper">
      <div class="login">
        <input v-model="username"><br>
        <input v-model="passsword"><br>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      username: '',
      password: ''
    }
  }
}
</script>

[asolopovas]

+1

[e-sana]

@yyx990803 Also having problems with this:

vue --version 2.8.1
vue init webpack-simple test

I can not put a breakpoint accurately, the lines are simply grayed out at many places, and when I try to put a new they end up in another place as originally intended.

package.json

{
  "name": "test",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-latest": "^6.0.0",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "vue-loader": "^11.1.4",
    "vue-template-compiler": "^2.2.1",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

[packetstracer]

+1 with a freshly generated 'vue-cli pwa', using chrome dev tools on os x

devtool: '#cheap-module-eval-source-map' on my webpack.dev.conf.js (tried all the possible values and not working either)

In this screenshot current line is the previous to the shown by the devtools (see this.user properties values: lastName value should be empty string)

When debugging with VS Code does not recognize sourcemaps either

[meldron]

Same problem with Chrome, Firefox works fine.

[msokk]

I found that Webpack 2.7.0 (last one) broke the sourcemaps for me. Default semver in package.json allows the latest minor release to be installed. Check if you have 2.7 in your node_modules - cat node_modules/webpack/package.json | grep "version\":". If so, try pinning it to 2.6.1