vue-cli: Error: No module factory available for dependency type: CssDependency

Version

4.1.2

Reproduction link

https://github.com/imran-iq/cssdependancy-poc

Environment info


Environment Info:

  System:
    OS: macOS 10.15.2
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 13.5.0 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 79.0.3945.88
    Firefox: Not Found
    Safari: 13.0.4
  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.2 => 4.1.2 
    @vue/cli-plugin-eslint: ^4.1.2 => 4.1.2 
    @vue/cli-plugin-router:  4.1.2 
    @vue/cli-plugin-vuex:  4.1.2 
    @vue/cli-service: 4.1.2 => 4.1.2 
    @vue/cli-shared-utils:  4.1.2 
    @vue/component-compiler-utils:  3.1.1 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^6.1.2 => 6.1.2 
    vue: ^2.6.11 => 2.6.11 
    vue-eslint-parser:  7.0.0 
    vue-hot-reload-api:  2.3.4 
    vue-json-tree-view: ^2.1.4 => 2.1.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.11 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.1.2 => 3.1.2 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

clone repo, run yarn install then yarn build

What is expected?

No errors

What is actually happening?

Get a CssDependency error

Not sure if this is a vue issue or a https://github.com/webpack-contrib/mini-css-extract-plugin issue, but since this issue was filed: https://github.com/vuejs/vue-cli/issues/5030 which produced an similar error message, I would post here.

This was not an issue with mini-css-extract-plugin at 0.8.2, but after a dependabot update project no longer builds

About this issue

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

Most upvoted comments

I got this error on a brand new project created by the cli and was able to get around it by using npx vue-cli-service build rather than npm run-script build when building the project.

+11

akiander on Apr 3, 2020

So, in my case error occuring, when I starting npm run build from d:\projects\... instead of D:\... Drive letter should be capitalized. This is very stupid requirement. Code should understand low and upper cased drive letters, because they are logically identical.

zdm on Sep 17, 2020

I believe this is due to the mini-css-extract-plugin and the corresponding loader resolves to different plugin instances.

In the default config, the plugin version depended by @vue/cli-service was ^0.8.2 and you have 0.9.0 installed in the project root. If both of them are of v0.8.2 or v0.9.0 the error would be gone.

If you aimed to modify the plugin option, you don’t need to add a use call, just call .tap. See https://github.com/neutrinojs/webpack-chain#config-plugins-modify-arguments

sodatea on Jan 7, 2020

This is a path casing issue. If you start Visual Studio Code using a path with incorrect case (eg by executing code . from cmd/PowerShell) or you run a build script from PowerShell when the path you are executing from is incorrect case then you will get this problem. I created the following powershell script to get the correct casing for the current path:

function Get-CaseSensitivePath { Param ( [parameter(Mandatory=$true)] [string] $path )

if (-not ( (Test-Path $path -PathType Leaf) -or (Test-Path $path -PathType Container) ) ) {
    # File or directory not found
    return $path
}

$correctCasePath = "";
foreach ($pathPart in $path.Split("\")) {
    if ($correctCasePath -eq "") {
        $correctCasePath = $pathPart.ToUpper() + "\";
        continue;
    }
    $correctCasePath = [System.IO.Directory]::GetFileSystemEntries($correctCasePath, $pathPart)[0];
}
return $correctCasePath;

}

mekatrol on Sep 16, 2020

I met this error, and bypass it by double checking the path of my running dictionary. And there was a capitalization error in the path.

zincopper on Jul 29, 2020

As of the linked issue, as it happened on a new project, it’s more likely to be a path casing issue. See https://github.com/vuejs/vue-cli/issues/5022#issuecomment-570770950

sodatea on Jan 7, 2020

@zdm thank you! Using correct cases in cd /Path/to/SoUrCe solved this totally unintelligible error for me

TobiSchluter on Jan 16, 2021

I can confirm solution from @akiander works, although this totally puzzles me why? I’d be thankful if someone can tell me why the difference?

nsimeonov on May 24, 2020