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

更新：这是Webpack 4.40.0和4.40.1中的错误，现在应该已修复。

Webpack的第43行SizeLimitsPlugin.js可以在这里看到：

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

如错误消息所建议，它正在尝试访问asset.name。

在最近几天似乎更改了该行，并且此更改将其更改为4.40.0版本。我对该代码没有足够的熟悉度，无法确定是否应该为错误负责，但它是可疑的。

似乎其他Vue用户也遇到了相同的问题：

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

在此建议了几种解决方法。例如：

创建一个名为vue.config.jsyour 的文件package.json，并将以下代码添加到该文件中：

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

或者，您可以使用：

module.exports = {
  productionSourceMap: false
}

要么：

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

有关这些功能的更多信息，请参见https://cli.vuejs.org/config/#vue-config-js

这些设置sourceMap: true和productionSourceMap: false还可以通过用户界面，如果你运行的设置vue ui，进入您的项目配置。