6

I use Laravel 5.4 with Vue.js 2.6. I have problem to see sourceMap of *.vue component file in console. I configure Laravel mix with this script:

let mix = require('laravel-mix');

mix.webpackConfig({
    devtool: 'eval-source-map'
});

mix.js([
        'resources/assets/js/app.js'
    ], 'public/js')
    .sourceMaps()
    .version();

For example I have vue component like this:

<template>
    <div class="Example" @click="add()">
        {{ name }}
    </div>
</template>

<script>
    export default {
        data(){
            return {
                name: 'John'
            }
        },
        methods:{
            add(){
                console.log('example click')
            }
        }
    };
</script>

but when Laravel mix compile it, I see like this in source tab of chrome:

var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    {
      staticClass: "Example",
      on: {
        click: function($event) {
          return _vm.add()
        }
      }
    },
    [_vm._v("\n    " + _vm._s(_vm.name) + "\n")]
  )
}
var staticRenderFns = []
render._withStripped = true
module.exports = { render: render, staticRenderFns: staticRenderFns }
if (module.hot) {
  module.hot.accept()
  if (module.hot.data) {
    require("vue-hot-reload-api")      .rerender("data-v-650f2efa", module.exports)
  }
}


//////////////////
// WEBPACK FOOTER
// ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-650f2efa","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./resources/assets/js/components/Example.vue
// module id = ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-650f2efa","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./resources/assets/js/components/Example.vue
// module chunks = 0

What should I do to see real and pure Example vue.js component in source tab?

1 Answer 1

3

Are you in the correct source location in the browser? You should look under webpack:// branch and not the top branch. If it help, my webpack mix has devtool: 'source-map' instead of devtool: 'eval-source-map' and I get the following - see screenshot below:

Webpack

I can view and debug all the sources under webpack:// fine.

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for your answer. Okay I can see in webpack:// section, but I in console doesn't show error in this line.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.