Debug with sourcemaps in IDE (phpstorm) with Vue single file component

[isometriq]

Version

2.4.2

Reproduction link

http://i-dont-have-it-is-a-build-phase-problem

Steps to reproduce

-Install laravel (mine is 5.4.30)
-Use sourcemaps in the mix file

mix
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .version()
    .sourceMaps();

-Usual installation: composer install, npm install
-Change phpstorm settings to tream .vue files as html
-Place breakpoints in the /resources/assets/js/components/Example.vue and in /resources/assets/js/app.js (for comparison; js files work)
-Use the component somewhere in /resources/views/welcome.blade.php with <example></example> inside a div with id #app
-Setup javascript remote debug config in Chrome (phpstorm in my case) and launch in debug
-Load the page in the opened browser window

What is expected?

Breakpoint in Vue and JS files should break.

What is actually happening?

Only breakpoints in the JS file

---

When inspecting Sources with Chrome devtools, I see something weird in the sourcemaps
The source for the vue files are at the root of webpack webpack://Example.vue and they contain the actual code that was in the vue files, but there are also copies (twice, one with a prefix) in webpack://./resources/assets/js/components/Example.vue and also webpack://./resources/assets/js/components/Example.vue?ec40, however their content seems to be the generated es2015 code...

I think that phpstorm expects to have the original source at these copies location.

Note that chrome devtools is able to break in webpack://Example.vue

I wonder if I move the component sourcecode in js files and use export default...

[isometriq]

Found same issue here (for vscode ide, but problem of same nature)
https://github.com/Microsoft/vscode-chrome-debug/issues/430

[posva]

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server, gitter or StackOverflow.

---

The real problem is on the webpack (from mix) config (or vue-loader if there really is a bug).

[xiachaoxulu]

@posva vue-loader sourceMap is not correct. the real problem is on webpack mix. ara you sure?
so should give a issue to webpack?

[xiachaoxulu]

vue-loader

import vue_script from "!!babel-loader!../../../../node_modules/vue-loader/lib/selector?type=script&index=0!./404.vue"

i find the problem is on babel-loader . it create sourceMap is not correct,

[TheDeveloperTom]

@xiachaoxulu so how did you solve the problem?