Vue-loader: 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.

[Leomund]

same problem latest chrome

[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

[msokk]

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.

[adamreisnz]

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

Have to use

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

[proYang]

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

Have to use

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

me too 😭😭😭

[chriswang-]

????????????? 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

[mprinc]

Hi @chriswang- here is the example of the vue.config.js excerpt:

// https://cli.vuejs.org/config/#vue-config-js
module.exports = {
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === "development") {
            // development environment configuration
            // https://webpack.js.org/configuration/devtool/#devtool
            // this is the most advanced for the development env
            config.devtool = "eval-source-map";
        }
    },
}

[JustAnotherSoftwareDeveloper]

Can you reopen this case? This is still broken.

[thecodewarrior]

For me the source maps were working, but they were just piled in a heap of other files which made it painful to find. This worked for me to filter out the "real" ones from the garbage. My project is set up fairly standard using Vue-CLI, Vue 3, and TypeScript.

module.exports = {
  chainWebpack: config => {
    config.devtool('source-map');

    /**
     * Sorts the mess of source maps.
     */
    config.output.devtoolModuleFilenameTemplate(info => {
      // This is what I used to determine the rules below. It outputs a ton of information so you can figure out how to
      // distinguish between the files you want and the ones you don't.
      // return `webpack://${info.resourcePath}?path=${info.resourcePath},query=${info.query},loaders=${info.allLoaders},hash=${info.hash}`;

      if(info.resourcePath.endsWith('.vue')) { // do some special processing for .vue files

        // the <script> block from vue files. this is where you put script breakpoints.
        if (
            info.query.startsWith('?vue&type=script') && // only the script section
            !info.allLoaders.includes('babel')           // don't use the one from babel
        ) {
          return `src://${info.resourcePath}?script`;
        }

        // the full vue file. You can't put script breakpoints here, but you can put render breakpoints here.
        if (
            info.query === '' && info.allLoaders === '' // no extra processing? I dunno, but it works
        ) {
          return `src://${info.resourcePath}?render`;
        }

      } else if(
          info.resourcePath.startsWith('./src') // this path may depend on your project configuration
      ) {
        return `src://${info.resourcePath}?${info.hash}`;
      }

      return `webpack:///${info.resourcePath}?${info.hash}`;
    });
  }
}

Results

The resulting tree looks like this:

The ?render files look like this, and allow you to set breakpoints in the render function:

The ?script files look like this, and allow you to set breakpoints in the script body: