Unable to npm run build on new project

[ddreier]

Version

4.1.2

Environment info

Environment Info:

  System:
    OS: Windows 10 10.0.17134
    CPU: (8) x64 Intel(R) Xeon(R) CPU E3-1505M v5 @ 2.80GHz
  Binaries:
    Node: 10.16.2 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1098.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  4.1.2
    @vue/babel-preset-jsx:  1.1.2
    @vue/babel-sugar-functional-vue:  1.1.2
    @vue/babel-sugar-inject-h:  1.1.2
    @vue/babel-sugar-v-model:  1.1.2
    @vue/babel-sugar-v-on:  1.1.2
    @vue/cli-overlay:  4.1.2
    @vue/cli-plugin-babel: ^4.1.0 => 4.1.2
    @vue/cli-plugin-eslint: ^4.1.0 => 4.1.2
    @vue/cli-plugin-router:  4.1.2
    @vue/cli-plugin-vuex:  4.1.2
    @vue/cli-service: ^4.1.0 => 4.1.2
    @vue/cli-shared-utils:  4.1.2
    @vue/component-compiler-utils:  3.1.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.11
    vue-eslint-parser:  5.0.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.8.3
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.11
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

PS C:\code> vue create -d repro
PS C:\code> cd repro
PS C:\code\repro> npm run build

What is expected?

npm run build works out of the box

What is actually happening?

PS C:\code\repro> npm run build

> repro@0.1.0 build C:\code\repro
> vue-cli-service build


 ERROR  Error: No module factory available for dependency type: CssDependency
Error: No module factory available for dependency type: CssDependency
    at addDependency (C:\Code\repro\node_modules\webpack\lib\Compilation.js:800:12)
    at iterationOfArrayCallback (C:\Code\repro\node_modules\webpack\lib\Compilation.js:208:3)
    at addDependenciesBlock (C:\Code\repro\node_modules\webpack\lib\Compilation.js:816:5)
    at Compilation.processModuleDependencies (C:\Code\repro\node_modules\webpack\lib\Compilation.js:827:4)
    at afterBuild (C:\Code\repro\node_modules\webpack\lib\Compilation.js:954:15)
    at buildModule.err (C:\Code\repro\node_modules\webpack\lib\Compilation.js:998:11)
    at callback (C:\Code\repro\node_modules\webpack\lib\Compilation.js:734:5)
    at module.build.error (C:\Code\repro\node_modules\webpack\lib\Compilation.js:782:12)
    at handleParseResult (C:\Code\repro\node_modules\webpack\lib\NormalModule.js:478:12)
    at doBuild.err (C:\Code\repro\node_modules\webpack\lib\NormalModule.js:500:6)
    at runLoaders (C:\Code\repro\node_modules\webpack\lib\NormalModule.js:358:12)
    at C:\Code\repro\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (C:\Code\repro\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at C:\Code\repro\node_modules\loader-runner\lib\LoaderRunner.js:186:6
    at context.callback (C:\Code\repro\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at childCompiler.runAsChild (C:\code\repro\node_modules\mini-css-extract-plugin\dist\loader.js:198:12)
    at compile (C:\Code\repro\node_modules\webpack\lib\Compiler.js:343:11)
    at hooks.afterCompile.callAsync.err (C:\Code\repro\node_modules\webpack\lib\Compiler.js:681:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Code\repro\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Code\repro\node_modules\tapable\lib\Hook.js:154:20)
    at compilation.seal.err (C:\Code\repro\node_modules\webpack\lib\Compiler.js:678:31)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Code\repro\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! repro@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the repro@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ddreier\AppData\Roaming\npm-cache\_logs\2020-01-02T22_36_06_103Z-debug.log

---

Running npm run serve works, and running vue build from the src directory also works.

I'm not sure why vue info says "@vue/cli: Not Found" when it clearly is installed. Before opening this issue I ran npm uninstall -g @vue/cli and npm install -g @vue/cli.

[ddreier]

I just noticed that I'm only getting that error when building in production mode.

[haoqunjiang]

I'm sorry but I can't reproduce this issue locally…
Could you provide a reproduction repo?

[ddreier]

Thanks for looking! I have uploaded the exact same code that I used when filling out the issue: https://github.com/ddreier/vue-cli-repro

[haoqunjiang]

Still can't reproduce.

As I looked into the code, seems the only possible way to trigger this issue is to remove mini-css-extract-plugin from the config while retains its corresponding loader. Have you added any custom config to your project?

[ddreier]

I have only added

  configureWebpack: {
    devtool: "source-map"
  }

In my vue.config.js to get source maps. The build fails with and without that.

[haoqunjiang]

Have you changed anything in package.json?
Have you tried delete package-lock.json and reinstall the dependencies?

It could be a dependency conflict.

[haoqunjiang]

Like, what's the output of npm ls webpack? If it's not correctly deduped then there might be a problem.

[ddreier]

Only change to package.json is adding a new script. Otherwise it's straight out of vue create -d.

"watch": "vue-cli-service build --watch"

I just tried deleting package-lock.json and ran npm install. Same error.

Here's the output of npm ls webpack:

PS C:\code\repro> npm ls webpack
repro@0.1.0 C:\code\repro
+-- @vue/cli-plugin-babel@4.1.2
| `-- webpack@4.41.5
+-- @vue/cli-plugin-eslint@4.1.2
| `-- webpack@4.41.5  deduped
`-- @vue/cli-service@4.1.2
  `-- webpack@4.41.5  deduped

[haoqunjiang]

I googled the error message and the only reports I got are these:

#5030
https://techcommunity.microsoft.com/t5/windows-dev-appconsult/how-to-integrate-vue-js-and-asp-net-core-using-spa-extension/bc-p/1081095/highlight/true#M209

So it's a very rare issue.

I noticed that all of the 3 cases are running on Windows (and maybe PowerShell).
Could you try to use a different terminal for the same command? Cmd for example.

[ddreier]

Wow, I didn't find that MS Tech Community thread when I was trying to search around.

And what do you know, I did npm run build in a Cmd instead of PowerShell and it works. That's bizarre.

Microsoft Windows [Version 10.0.17134.1130]
(c) 2018 Microsoft Corporation. All rights reserved.

C:\Users\ddreier>cd C:\code\repro

C:\Code\repro>npm run build

> repro@0.1.0 build C:\Code\repro
> vue-cli-service build


\  Building for production...

 DONE  Compiled successfully in 6620ms                                                                        1:13:08 AM

  File                                 Size               Gzipped

  dist\js\chunk-vendors.8ac9e3f6.js    89.13 KiB          31.93 KiB
  dist\js\app.f0aab1b1.js              4.62 KiB           1.64 KiB
  dist\css\app.e2713bb0.css            0.33 KiB           0.23 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

[ddreier]

I have tried with 4.1.0 and 4.0.5 and gotten the same error in PowerShell.

Installed 3.12.1 and it's the same situation, PowerShell doesn't work but Command Prompt does. The actual error is different though:

PS C:\code\repro3121> npm run build

> repro3121@0.1.0 build C:\code\repro3121
> vue-cli-service build


C:\Code\repro3121\node_modules\neo-async\async.js:16
    throw new Error('Callback was already called.');
    ^

Error: Callback was already called.
    at throwError (C:\Code\repro3121\node_modules\neo-async\async.js:16:11)
    at C:\Code\repro3121\node_modules\neo-async\async.js:2818:7
    at process._tickCallback (internal/process/next_tick.js:61:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! repro3121@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the repro3121@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ddreier\AppData\Roaming\npm-cache\_logs\2020-01-04T07_56_09_650Z-debug.log

[haoqunjiang]

Looks like webpack fails to load some loader/plugin when executed in PowerShell.
I'm not familiar with PowerShell but you can check for the path cases…

I noticed that in the PS prompts it's C:\code while in cmd it's C:\Code. Maybe that's the problem.

[haoqunjiang]

Anyway, not likely a Vue CLI bug, if the real cause confirmed, please report to webpack.

In Vue CLI we've already enabled the case-sensitive-paths-webpack-plugin to avoid such issues. But seems in this case the error came before the plugin had a chance to complain

vue-cli/packages/@vue/cli-service/lib/config/base.js

Lines 183 to 185 in 80b9395

	webpackConfig
	.plugin('case-sensitive-paths')
	.use(require('case-sensitive-paths-webpack-plugin'))