vue-cli: npm run build error No module factory available for dependency type: CssDependency

Version

4.1.2

Environment info

System:
    OS: Windows 10 10.0.17763
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Node: 10.16.2 - E:\Game\node.EXE
    Yarn: Not Found
    npm: 6.9.0 - E:\Game\npm.CMD
  Browsers:
    Edge: 44.17763.831.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.0 => 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/eslint-config-prettier: ^5.0.0 => 5.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-router: ^3.1.3 => 3.1.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 E:\Games > cd hitokoto

PS E:\Games\hitokoto > npm run build

What is expected?

npm run build succeeded

What is actually happening?

ERROR  Error: No module factory available for dependency type: CssDependency
Error: No module factory available for dependency type: CssDependency
    at addDependency (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:800:12)
    at iterationOfArrayCallback (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:208:3)
    at addDependenciesBlock (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:816:5)
    at Compilation.processModuleDependencies (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:827:4)
    at afterBuild (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:954:15)
    at buildModule.err (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:998:11)
    at callback (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:734:5)
    at module.build.error (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:782:12)
    at handleParseResult (E:\Games\hitokoto\node_modules\webpack\lib\NormalModule.js:478:12)
    at doBuild.err (E:\Games\hitokoto\node_modules\webpack\lib\NormalModule.js:500:6)
    at runLoaders (E:\Games\hitokoto\node_modules\webpack\lib\NormalModule.js:358:12)
    at E:\Games\hitokoto\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (E:\Games\hitokoto\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at E:\Games\hitokoto\node_modules\loader-runner\lib\LoaderRunner.js:186:6
    at context.callback (E:\Games\hitokoto\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at childCompiler.runAsChild (E:\Games\Hitokoto\node_modules\mini-css-extract-plugin\dist\loader.js:198:12)
    at compile (E:\Games\hitokoto\node_modules\webpack\lib\Compiler.js:343:11)
    at hooks.afterCompile.callAsync.err (E:\Games\hitokoto\node_modules\webpack\lib\Compiler.js:681:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Games\hitokoto\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (E:\Games\hitokoto\node_modules\tapable\lib\Hook.js:154:20)
    at compilation.seal.err (E:\Games\hitokoto\node_modules\webpack\lib\Compiler.js:678:31)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Games\hitokoto\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
E:\Games\hitokoto\node_modules\neo-async\async.js:16
    throw new Error('Callback was already called.');
    ^

Error: Callback was already called.
    at throwError (E:\Games\hitokoto\node_modules\neo-async\async.js:16:11)
    at E:\Games\hitokoto\node_modules\neo-async\async.js:2818:7
    at process._tickCallback (internal/process/next_tick.js:61:11)

Total task duration: 9.96s


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.

and i running vue-cli-service build,The system throws this error:No module factory available for dependency type: CssDependency

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 15 (2 by maintainers)

Most upvoted comments

I am a bit late for this issue and this is really not related to Vue CLI. For me the issue was that I did not have the MiniCssExtractPlugin listed in the webpack configs’ plugins section, but used it’s loader in the rules section.

According to this answer https://stackoverflow.com/a/59618639/32429 it is related to the upper/lower case of the path used when npm run build is executed. Is there any way to adjust that when the Vue UI runs the build?

The footer in the Vue UI shows the path all in lowercase, but the real path has uppercase letters in it.

Renaming the folders to be all in lowercase letters resolved the problem for me. (On Windows 10.)