Source maps generation adds broken intermediate code

Version

15.4.1

Reproduction link

https://github.com/NetMatch/vue-loader-testcase

Steps to reproduce

1. Clone the linked repository
2. Execute npm ci
3. Execute npm run build
4. Inspect the generated source maps in the dist folder

What is expected?

vue-loader generates source maps for the source Vue SFC file and the constituent template, style and script sections.

The appendExtension option is honored and the source map lists the constituents as Example.vue.html, Example.vue.css and Example.vue.js.

What is actually happening?

vue-loader generates source maps for intermediate stages of generated JS code rather than the original sources of the template, style and JS sections.

The appendExtension option is not honored. All generated files are generated under the Example.vue name and are disambiguated by adding part of their content hash as a suffixed query string.

---

Same issue as in #1163 where the root cause was claimed to be Babel and should have been resolved with latest versions of all build tools. However, the test case presented here uses the latest versions of Webpack and vue-loader and doesn’t even use Babel at all. And still has this problem.

[JustAnotherSoftwareDeveloper]

Yeah this essentially renders vue unusable. How do you expect people to use an application in production if they can’t debug it? I understand there might be fixes in the cases, but they’re not guaranteed to work and I would expect this to work out of the box

[ncjones]

What is the status with this issue? Will it ever be addressed? What can I do to help move it along?

It’s very frustrating that Vue template errors can not be mapped to source. When our react native apps have errors in production the Sentry error shows exactly the line in source where the error occurred but for Vue we just get garbage.

I think this is the same issue as https://github.com/vuejs/vue-cli/issues/2978.