Improper or bad sourcemaps generated

Version

4.0.5

Reproduction link

https://github.com/genu/vue-sourcemaps-bug

Environment info

System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Browsers:
    Chrome: 74.0.3729.169
    Firefox: 68.2.0
    Safari: 13.0.3
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  4.0.5 
    @vue/babel-preset-jsx:  1.1.1 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.1.1 
    @vue/babel-sugar-v-on:  1.1.0 
    @vue/cli-overlay:  4.0.5 
    @vue/cli-plugin-babel: ^4.0.0 => 4.0.5 
    @vue/cli-plugin-eslint: ^4.0.0 => 4.0.5 
    @vue/cli-plugin-router: ^4.0.0 => 4.0.5 
    @vue/cli-plugin-vuex: ^4.0.0 => 4.0.5 
    @vue/cli-service: ^4.0.0 => 4.0.5 
    @vue/cli-shared-utils:  4.0.5 
    @vue/component-compiler-utils:  3.0.1 
    @vue/eslint-config-prettier: ^5.0.0 => 5.0.0 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 
    vue: ^2.6.10 => 2.6.10 
    vue-eslint-parser:  5.0.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.7.2 
    vue-router: ^3.1.3 => 3.1.3 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.0.1 => 3.1.1 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Create a new project with vue create hello-world
Run project with yarn serve
Open Chrome and check devtools

What is expected?

I should be able to see my components like App.vue, etc, and be able to put breakpoints as needed.

What is actually happening?

I see multiple App.vue files like App.vue?bff9, App.vue?8842, etc. I also see a App.vue, but when I go to it the source is a minified file.

I can't seem to place breakpoints in the devtools in any of the vue files because they are all showing up as minified or not even the correct files.

Additional Information

Similar to: #2978 All of the App.vue files seem to have different contents:

I'm having this exact problem and it's driving me crazy, I compared the vue-cli webpack config and the only difference is the use of devtool: 'cheap-module-eval-source-map' in version 3.0 and a new property called optimization but I don't know how to fix it.

EDIT: It seems that the file is there but for me it's the first one when I search in Chrome 78 but it's buried in a lot of other similar files in Firefox 70 but I needed to add this to vue.config.js:

configureWebpack: {
    devtool: process.env.NODE_ENV !== 'production' ? 'eval-source-map' : false,
  },

I tried using Firefox 70 in a previous version of my project with vue-cli 3.x and it's working properly, it's the first file found when searching for the name so this must be something new on vue-cli 4

vuejs / vue-cli