Weird issue with source maps

[farzadmf]

Version

3.1.1

Reproduction link

https://github.com/farzadmf/vue-cli-sourcemap-issue

Node and OS info

Node 11.0.0 / yarn 1.12.3 / Windows 10

Steps to reproduce

1. Run "yarn serve" to start the application
2. Open Chrome devtools and start searching for "HelloWorld.vue"

What is expected?

When I search for HelloWorld.vue in Chrome devtools, I should see a single file being listed, and when I open that file, I should see my actual source code there

What is actually happening?

When I search for "HelloWorld.vue", I see multiple files being listed with names such as HelloWorld.vue?e24f ... (and a few others with different hash values)

---

• I developed an app a few months ago with Vue, and I don't remember having this problem; maybe I've forgotten ...!
• The version of vue-cli I have is 3.1.3, but it's not available in the drop-down
• My Chrome version is 70.0.3538.102

[LinusBorg]

We'll look into this.

However, Sourc emaps in chrome have always been unstable to me and many other people, and I remember that I experiences this issue specifically and could only resolve it by switching to a different kind of source map.

So you can try using different values for the devtool setting of webpack:

// vue.config.js
module.exports = {
  configureWeback: {
    // See available sourcemaps:
    // https://webpack.js.org/configuration/devtool/#devtool
    // and try out different ones
    devtool: 'eval-source-map'

  }
}

[farzadmf]

@LinusBorg Thank you for your answer, I tried your solution (with a bit of fixing the typos ;) ), but, to be honest, I don't think I see any difference :(

[xv-jiaqi]

@farzadmf HI 😃 you can do this: ⬇️ in your vue.config.js config file：

module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'development') {
      config.devtool = 'eval-source-map';

      config.output.devtoolModuleFilenameTemplate = info => info.resourcePath.match(/^\.\/\S*?\.vue$/)
        ? `webpack-generated:///${info.resourcePath}?${info.hash}`
        : `webpack-yourCode:///${info.resourcePath}`;

      config.output.devtoolFallbackModuleFilenameTemplate = 'webpack:///[resource-path]?[hash]';
    }
  },
};

this idea source is The joy that is Source Maps (with Vue.js and TypeScript) 🔗

[farzadmf]

Good for you @kkxujq that it works, but for me, it's still the same :(

And this is the structure of my webpack-yourcose://:

I don't have an src folder the same as you :( ?! and only my pure ts files are listed

[xv-jiaqi]

Good for you @kkxujq that it works, but for me, it's still the same :(

And this is the structure of my webpack-yourcose://:

I don't have an src folder the same as you :( ?! and only my pure ts files are listed

if your project is ts files, please use this ⬇️ config :

// vue.config.js
configureWebpack: config => {
    if (process.env.NODE_ENV === 'development') {
      config.devtool = 'eval-source-map';
      config.output.devtoolModuleFilenameTemplate = info =>

        info.resourcePath.match(/\.vue$/) && !info.identifier.match(/type=script/)  // this is change ✨ 
          ? `webpack-generated:///${info.resourcePath}?${info.hash}`
          : `webpack-yourCode:///${info.resourcePath}`;

      config.output.devtoolFallbackModuleFilenameTemplate = 'webpack:///[resource-path]?[hash]';
    }
  }

like this :

You can try this method, good luck :)

[farzadmf]

Thanks you @kkxujq for your answer. It seems more promising now, but I feel something is still missing:

• As you see, as example, I don't see App.vue in webpack-yourcode:// section
• The file seems to be off! If you look, my source code is starting at line 39 with all those empty lines before it
• Good thing that my breakpoint is working

It would be ideal if I could somehow see my file as I see it in my editor (including template, script, and style) ...

[davestewart]

@kkxujq - this is (I think) bloody brilliant!

I've been struggling with multiple files for as long as I can remember, then this week decided to tackle it.

I worked out that there are at least 4 copies of files (sometimes 10, I don't know why) because of the template, script and style parts; each gets their own file.vue?xxxxx file.

The JS code you referenced above from that link worked perfectly, thanks!

The TS code took some tweaking:

    if (process.env.NODE_ENV === 'development') {
      config.devtool = 'eval-source-map'
      config.output.devtoolFallbackModuleFilenameTemplate = 'webpack:///[resource-path]?[hash]'
      config.output.devtoolModuleFilenameTemplate = info => {
        const isVue = info.resourcePath.match(/\.vue$/)
        const isScript = info.identifier.match(/type=script/)
        return isVue && !isScript
          ? `webpack-vue:///${info.resourcePath}`
          : `webpack-generated:///${info.resourcePath}?${info.hash}`
      }
    }

I seemed to have to swap the output paths around; I assume this holds that a Vue file is not a script?

Now, I can see all my .vue files in webpack-vue (I renamed this, and it seems to show first) which is extremely useful:

Hopefully this won't just be a fluke. When Webpack works or is intuitive, it's amazing. When it's not it's like pulling teeth.

Going to get on and run with the project now... hopefully it will stand up to the rigours of development!