npm run build error No module factory available for dependency type: CssDependency #5030

kikyoluka · 2020-01-03T14:02:16Z

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

The text was updated successfully, but these errors were encountered:

haoqunjiang · 2020-01-03T17:36:57Z

Steps to reproduce

PS E:\Games > cd hitokoto

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

kikyoluka · 2020-01-04T01:48:52Z

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

kikyoluka · 2020-01-04T08:06:18Z

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/#/

haoqunjiang · 2020-01-04T09:18:45Z

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 · 2020-02-03T21:23:47Z

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 · 2020-02-10T12:22:55Z

Than you @letscodehu . It helped me!

mmikitka · 2020-03-16T21:37:32Z

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 · 2020-04-09T22:22:28Z

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 · 2020-04-09T22:59:14Z

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

CabuxaMapache · 2020-05-04T09:12:35Z

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 · 2020-05-04T19:55:26Z

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.

WuShangGao · 2020-05-09T03:35:37Z

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. webpack-contrib/mini-css-extract-plugin#493 (comment)

BoWang816 · 2020-05-20T10:51:09Z

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 · 2020-07-30T18:38:05Z

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 · 2020-08-13T21:55:01Z

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.

haoqunjiang added the needs reproduction This issue is missing a minimal runnable reproduction, provided by the author label Jan 3, 2020

haoqunjiang mentioned this issue Jan 4, 2020

Unable to npm run build on new project #5022

Closed

haoqunjiang closed this as completed Jan 4, 2020

imran-iq mentioned this issue Jan 6, 2020

Error: No module factory available for dependency type: CssDependency #5043

Closed

morewry mentioned this issue Jan 16, 2020

No module factory available for dependency type: CssDependency webpack-contrib/mini-css-extract-plugin#493

Closed

jdinartejesus mentioned this issue Jul 31, 2020

TypeError on mini-css-extract-plugin/dist/CssDependency.js #5733

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

npm run build error No module factory available for dependency type: CssDependency #5030

npm run build error No module factory available for dependency type: CssDependency #5030

kikyoluka commented Jan 3, 2020 •

edited

Loading

haoqunjiang commented Jan 3, 2020

Steps to reproduce

kikyoluka commented Jan 4, 2020 •

edited

Loading

kikyoluka commented Jan 4, 2020 •

edited

Loading

haoqunjiang commented Jan 4, 2020

letscodehu commented Feb 3, 2020

akos96kov commented Feb 10, 2020 •

edited

Loading

mmikitka commented Mar 16, 2020

glittle commented Apr 9, 2020 •

edited

Loading

glittle commented Apr 9, 2020

CabuxaMapache commented May 4, 2020

letscodehu commented May 4, 2020

WuShangGao commented May 9, 2020

BoWang816 commented May 20, 2020

TECDevelopment commented Jul 30, 2020

alfonsoelmas commented Aug 13, 2020 •

edited

Loading

npm run build error No module factory available for dependency type: CssDependency #5030

npm run build error No module factory available for dependency type: CssDependency #5030

Comments

kikyoluka commented Jan 3, 2020 • edited Loading

Version

Environment info

Steps to reproduce

What is expected?

What is actually happening?

haoqunjiang commented Jan 3, 2020

Steps to reproduce

kikyoluka commented Jan 4, 2020 • edited Loading

kikyoluka commented Jan 4, 2020 • edited Loading

haoqunjiang commented Jan 4, 2020

letscodehu commented Feb 3, 2020

akos96kov commented Feb 10, 2020 • edited Loading

mmikitka commented Mar 16, 2020

glittle commented Apr 9, 2020 • edited Loading

glittle commented Apr 9, 2020

CabuxaMapache commented May 4, 2020

letscodehu commented May 4, 2020

WuShangGao commented May 9, 2020

BoWang816 commented May 20, 2020

TECDevelopment commented Jul 30, 2020

alfonsoelmas commented Aug 13, 2020 • edited Loading

kikyoluka commented Jan 3, 2020 •

edited

Loading

kikyoluka commented Jan 4, 2020 •

edited

Loading

kikyoluka commented Jan 4, 2020 •

edited

Loading

akos96kov commented Feb 10, 2020 •

edited

Loading

glittle commented Apr 9, 2020 •

edited

Loading

alfonsoelmas commented Aug 13, 2020 •

edited

Loading