Vue-cli run build TypeError 'name' Undefined

Question

I just started to use vue-cli and I got stock with a problem.

Following the Docs instructions:

• I installed vue/cli npm install -g @vue/cli (version 3.11.0).

• I created a project vue create test (default config) and cd into the folder.

• But when I tried to build the project npm run build, I got this error.

TypeError: Cannot read property 'name' of undefined
    at entrypoint.getFiles.reduce (C:\Users\MyUser\test\node_modules\webpack\lib\performance\SizeLimitsPlugin.js:43:25)
    at Array.reduce (<anonymous>)
    at getEntrypointSize (C:\Users\MyUser\test\node_modules\webpack\lib\performance\SizeLimitsPlugin.js:40:27)
    at compiler.hooks.afterEmit.tap.compilation (C:\Users\MyUser\test\node_modules\webpack\lib\performance\SizeLimitsPlugin.js:75:18)
    at _next0 (eval at create (C:\Users\MyUser\test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:10:1)
    at _err0 (eval at create (C:\Users\MyUser\test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1)
    at callback (C:\Users\MyUser\test\node_modules\copy-webpack-plugin\dist\index.js:126:17)
    at afterEmit (C:\Users\MyUser\test\node_modules\copy-webpack-plugin\dist\index.js:220:13)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\MyUser\test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:20:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\MyUser\test\node_modules\tapable\lib\Hook.js:154:20)
    at asyncLib.forEachLimit.err (C:\Users\MyUser\test\node_modules\webpack\lib\Compiler.js:482:27)
    at C:\Users\MyUser\test\node_modules\neo-async\async.js:2818:7
    at done (C:\Users\MyUser\test\node_modules\neo-async\async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\MyUser\test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at outputFileSystem.writeFile.err (C:\Users\MyUser\test\node_modules\webpack\lib\Compiler.js:464:33)
    at C:\Users\MyUser\test\node_modules\graceful-fs\graceful-fs.js:57:14

I tried it in different folders of my PC in case some file were having conflict but with no luck. Any idea how can I solve this?

Answer 1

Update: This was a bug in Webpack 4.40.0 and 4.40.1 and should now be fixed.

---

Line 43 of Webpack's SizeLimitsPlugin.js can be seen here:

https://github.com/webpack/webpack/commit/758269e81456c946a96b521ee936dbec99d07132#diff-cf9a43cf0e0fef12e89091cd183c607dR43

As suggested by the error message it is trying to access asset.name.

It would appear that this line got changed in the last few days and the change made it into the 4.40.0 release. I don't have enough familiarity with that code to say for sure whether it is to blame for the error but it is suspicious.

It seems that other Vue users have run into the same problem:

https://github.com/vuejs/vue-cli/issues/4572

Several workarounds are suggested there. e.g.:

Create a file called vue.config.js alongside your package.json and add the following code to that file:

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

Alternatively you can use:

module.exports = {
  productionSourceMap: false
}

or:

module.exports = {
  configureWebpack: {
    devtool: "eval-source-map"
  }
}

For more information on what these do see https://cli.vuejs.org/config/#vue-config-js

The settings sourceMap: true and productionSourceMap: false can also be set via the UI if you run vue ui and go into the configuration for your project.