WebPack sourcemaps confusing (duplicated files)

Question

I decided to try out WebPack on a new project I'm spinning up today and I'm getting really strange behavior from the sourcemaps. I can't find anything about it in the documentation, nor can I find anyone else having this issue when skimming StackOverflow.

I'm currently looking at the HelloWorld app produced by Vue-CLI's WebPack template -- no changes have been made to the code, the build environment, or anything.

I installed everything and ran it like so:

vue init webpack test && cd test && npm install && npm run dev

Looking at my sourcemaps, I see the following:

This is a hot mess. Why are there three version of HelloWorld.vue and App.vue? Worse yet, each version has a slightly different version of the code and none of them match the original source. The HellowWorld.vue sitting in the root directory does match the original source, but what's it doing down there instead of in the ./src/components folder? Finally, why isn't there a fourth App.vue that has the original source for it?

As far as I can tell this may have something to do with the WebPack loaders. I've never gotten these kinds of issues with any other bundler, though. Below is an example of the exact same steps using the Browserify Vue-CLI template:

No webpack:// schema, only one copy of every file, the files actually contain the original source code (kind of important for source maps), no unexpected (webpack)/buildin or (webpack)-hot-middleware, no . subdirectory,.... just the source code.

Revival

The lack of meaningful source maps has made it incredibly difficult to debug and diagnose issues with my code. For instance, I tried getting Vuex to work but my state is always coming up empty. I spent an hour and couldn't begin to understand why. – Revival

Are you sure this is a webpack issue, have you tried, for example, using a different browser or changing the source map type? Could be related to hot reloading / hot module replacement, which doesn't trigger a full page reload (source maps are typically cached by the browser). Can you see many versions of HelloWorld.vue after a full page reload? – Midinette

I have tried other browsers, but I have not tried changing the source map type. I can try a few and report back. – Revival

I just tried source-map, inline-source-map, cheap-source-map, inline-cheap-module-source-map, and eval. Although the source maps from eval were better, they still suffered a lot of the same issues, including have 3-4 versions of every source file. I'll try disabling hot reloading to see if that helps. – Revival

I disabled hot module reloading and just did a standard build with source maps -- same bizarre output. – Revival

I've seen very similar when using hot reloading – Overhear

Answer 1

I haven't worked with Vue so can't really describe how exactly this is happening but it seems to be related to Vue Loader. Looking at the documentation I did not really find anything that clarifies why it would create three different files for one component. But it does seem logical considering that a .vue file might contain three types of top-level language blocks: <template>, <script>, and <style>.

Also, looking at two of those files you do see a comment at end of each file that suggests it was modified in some way by a Vue loader. Either this

//////////////////
// WEBPACK FOOTER
// ./node_modules/vue-loader/lib/template-compiler

or

//////////////////
// WEBPACK FOOTER
// ./node_modules/vue-style-loader!./node_modules/css-loader

The third file is different but it still does have code that identifies it as being modified by Vue loader. Here is some of that code

function injectStyle (ssrContext) {
  if (disposed) return
  require("!!vue-style-loader...")
}
/* script */
import __vue_script__ from "!!babel-loader!../../node_modules/vue-loader/..."
/* template */
import __vue_template__ from "!!../../node_modules/vue-loader/..."
/* styles */
var __vue_styles__ = injectStyle

The documentation also says this:

vue-loader is a loader for Webpack that can transform Vue components written in the following format into a plain JavaScript module:

Which explains why you might not see the same type of behaviour with other bundlers.

Now, this might not be the answer you were looking for but just wanted to share what I had found.

Frieze

Answer 2

This is actually a feature of webpack.

webpack has HMR (Hot Module Reloading). If you look in your network tab, go ahead and make an update to your HelloWorld.vue file. You'll see a js chunk come thru as well as an updated JSON manifest. Both of these will have a unique hash at the end for each time you make a change to the application. It does this so the browser does not have to do a full reload.

For a better explanation of this I would highly recommend reading through https://webpack.js.org/concepts/hot-module-replacement/

Januaryjanuisz

I'm well aware that Hot Module Reloading is a feature of WebPack. However this question isn't about Hot Module Reloading, it's about how the source maps produced by WebPack are meaningless. When I compile my code for production with external source maps (no Hot Module Reloading) I still get unreadable source maps like this. – Revival