vue create default template that will not build

[cameroncf]

Version

3.11.0

Reproduction link

https://gist.github.com/cameroncf/09c88edf99a7ed74a2a693d8816ee964

Environment info

 System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-3770 CPU @ 3.40GHz
  Binaries:
    Node: 12.10.0 - ~/.nvm/versions/node/v12.10.0/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.3 - ~/.nvm/versions/node/v12.10.0/bin/npm
  Browsers:
    Chrome: 77.0.3865.75
    Firefox: 66.0.3
    Safari: 12.1.2
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.11.0 
    @vue/babel-preset-jsx:  1.1.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.1.0 
    @vue/cli-overlay:  3.11.0 
    @vue/cli-plugin-babel: ^3.11.0 => 3.11.0 
    @vue/cli-plugin-eslint: ^3.11.0 => 3.11.0 
    @vue/cli-service: ^3.11.0 => 3.11.0 
    @vue/cli-shared-utils:  3.11.0 
    @vue/component-compiler-utils:  3.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 (4.7.1)
    vue: ^2.6.10 => 2.6.10 
    vue-eslint-parser:  5.0.0 (2.0.3)
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.7.1 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. Run: vue create x && cd x && yarn build
2. Accept default config options.
3. Observe failure / error

What is expected?

Successful build of minimal demo template created by Vue CLI.

What is actually happening?

Build fails with error:

vue-cli-service build

ERROR TypeError: Cannot read property 'name' of undefined
TypeError: Cannot read property 'name' of undefined
at /path/to/code/x/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:43:25
at Array.reduce ()
at getEntrypointSize (/path/to/code/x/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:40:27)
at /path/to/code/x/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:75:18
at _next0 (eval at create (/path/to/code/x/node_modules/tapable/lib/HookCodeFactory.js:33:10), :10:1)
at eval (eval at create (/path/to/code/x/node_modules/tapable/lib/HookCodeFactory.js:33:10), :24:1)
at callback (/path/to/code/x/node_modules/copy-webpack-plugin/dist/index.js:126:17)
at afterEmit (/path/to/code/x/node_modules/copy-webpack-plugin/dist/index.js:220:13)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/path/to/code/x/node_modules/tapable/lib/HookCodeFactory.js:33:10), :20:1)
at AsyncSeriesHook.lazyCompileHook (/path/to/code/x/node_modules/tapable/lib/Hook.js:154:20)
at /path/to/code/x/node_modules/webpack/lib/Compiler.js:482:27
at /path/to/code/x/node_modules/neo-async/async.js:2818:7
at done (/path/to/code/x/node_modules/neo-async/async.js:3522:9)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/path/to/code/x/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
at /path/to/code/x/node_modules/webpack/lib/Compiler.js:464:33
at /path/to/code/x/node_modules/graceful-fs/graceful-fs.js:57:14
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

---

This appears to be due to a missing sourcemaps for css files. The js sourcemaps are build and exist, but when the webpack SizeLimitsPlugin runs, it expects the css file to have a sourcemap too, which is does not.

I was able to resolve this by adding a vue.config.js file to the project (there wasn't one) containing the following:

configureWebpack: {
    devtool: "eval-source-map"
 }

I am not sure I completely understand why some sourcemaps got generated and others did not. Perhaps vue.config.js should be generated by the create template in this case?

Thanks for reading about my bug!

[Akryum]

Other workarounds in vue.config.js:

module.exports = {
   css: {
     sourceMap: true
   }
}

module.exports = {
   productionSourceMap: false
}

[marcin-piekarski]

Getting the same issue, and the work around works.

[sodatea]

webpack/webpack#9696

[sodatea]

Fixed in webpack v4.40.1

[passt0r]

Update webpack to v4.40.1, still got the same issue.

[sodatea]

So, as this comment said, there may still be a potential bug in webpack webpack/webpack#9696 (comment) (I did not encounter that bug on my machine, though)
So please wait for the next webpack release or pin the webpack version to 4.39 for now.

[bulletmark]

I get this problem also using webpack v4.40.1. Downgrading to v4.39 fixes it.

[ihelmer07]

@sodatea or @bulletmark Could you give the newbie (me) to Vuejs a quick tutorial on how to pin the webpack version?

[sodatea]

Add this field to package.json:

"resolutions": {
  "webpack": "4.39"
}

If using yarn, just run yarn again.
If using npm:

rm -r node_modules
npx npm-force-resolutions
npm install

[bulletmark]

@ihelmer07 I am a newbie also. I merely did:

npm install webpack@4.39

[Akryum]

Reopening pending more news from webpack

[sokra]

should be fixed with webpack v4.40.2

It's a little bit weird that these errors happen, because normally a ChunkGroup should not reference a not-existing asset. Maybe there is some other plugin which deletes an asset (delete compilation.assets[...]) without removing it from the ChunkGroup (chunkGroup.files.splice(...)), causing this weird state.

[bulletmark]

Can confirm, npm update, i.e. webpack->4.40.2 fixes the problem.

[NikitaIT]

webpack->4.40.2 didn't fix it for me. But maybe this is due to the presence of several webpack in my monorepository. And I don’t understand what’s the matter because a day ago everything worked.
Day ago i added to my vue.config.js this:

css: {
    // some code
}

and now Akryum sourceMap: true solve this problem for me.

[Amine970]

Other workarounds in vue.config.js:

module.exports = {
   css: {
     sourceMap: true
   }
}

module.exports = {
   productionSourceMap: false
}

why does this work ? omg I don't understand