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

[kikyoluka]

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

[sodatea]

Steps to reproduce

PS E:\Games > cd hitokoto

What's the project?
Could you provide a reproduction repo, please?

[kikyoluka]

Thanks for looking! I have uploaded the exact same code that I used when filling out the issue:
https://github.com/kikyoluka/hitokoto

[kikyoluka]

It's unbelievable. I just cloned and built using the above library, and this time it worked without any problems.
Now it is running normally：https://kikyoluka.github.io/hitokoto/#/

[sodatea]

I guess it's related to the shell or file system…
Anyway, not likely a Vue CLI bug and non-reproducible. So I'm closing this issue.

[letscodehu]

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.

[akos96kov]

Than you @letscodehu . It helped me!

[mmikitka]

I only found success with v0.8.0 of mini-css-extract-plugin, when used with vue-cli-service (v0.9.0, v0.8.2, and v0.8.1 resulted in the same CssDependency error message).

I pinned the version via the following package.json entry:

 "resolutions": {
    "@vue/cli-service/mini-css-extract-plugin": "0.8.0"
  }

[glittle]

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.

[glittle]

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

[CabuxaMapache]

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.

Can you explain a little more the files and where did you change this?

[letscodehu]

Can you explain a little more the files and where did you change this?

@CabuxaMapache Sure! I faced this issue with a simple webpack build, the relevant part of the config:

// required the mini-css plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [], // the plugin section missed the 'new MiniCssExtractPlugin()'
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'], // used the loader here
      },
    ],
  },
};

I know that github issues is not stackoverflow, but when searched for the issue this was one of the first result, therefore I included my solution for this even though its not vue-cli.

[WindWu]

Can you explain a little more the files and where did you change this?

@CabuxaMapache Sure! I faced this issue with a simple webpack build, the relevant part of the config:

// required the mini-css plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [], // the plugin section missed the 'new MiniCssExtractPlugin()'
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'], // used the loader here
      },
    ],
  },
};

I know that github issues is not stackoverflow, but when searched for the issue this was one of the first result, therefore I included my solution for this even though its not vue-cli.

I happened to get this thread that fixed my issue by adding the webpack plugin instance. Hope this could work for you. https://github.com/webpack-contrib/mini-css-extract-plugin/issues/493#issuecomment-603038616

[BoWang816]

If you use webpack-merge to merge the cooperation, MiniCssExtractPlugin is used in the loader, but the MiniCssExtractPlugin is not used in the same file as MiniCssExtractPlugin, the error will occur,!!!

You need to be in the same file Use MiniCssExtractPlugin in both the loader and plugin.

like this:

[TECDevelopment]

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.

Thank you! This worked perfectly for me! One letter was off. Man that's frustrating lol.

[alfonsoelmas]

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.

I had same problem and this answer was the solution for my fix.
Thank you.