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

Created on 6 Jan 2020  ·  20Comments  ·  Source: vuejs/vue-cli

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

picture imran-iq

Most helpful comment

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.

picture akiander on 3 Apr 2020
👍8 😄3

All 20 comments

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 picture sodatea on 7 Jan 2020
👍1

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 picture sodatea on 7 Jan 2020
👍2

Thank you for the help.

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.

This was the case I have updated the dependency accordingly and now yarn build works

imran-iq picture imran-iq on 7 Jan 2020

Receiving this on a new project. Tried to create several new projects, and none of them can build with vue cli v4.1.2.

What is the solution?

douglasg14b picture douglasg14b on 31 Jan 2020

版

4.1.2

复制链接

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

环境信息

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

重现步骤

克隆仓库，yarn install然后运行yarn build

期望什么？

没有错误

实际发生了什么？

收到CssDependency错误

不知道这是vue问题还是https://github.com/webpack-contrib/mini-css-extract-plugin问题，但是由于已发布此问题：＃5030产生了类似的错误消息，我将发布这里。

对于mini-css-extract-plugin0.8.2，这不是问题，但是在dependabot更新项目之后不再构建

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

解决方案：
const router = new VueRouter({
routes
// mode: 'history',
// routes,
})
More details：
http://code.z01.com/doc/Vue.html#error2

zoomla picture zoomla on 11 Feb 2020

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"
  }
mmikitka picture mmikitka on 16 Mar 2020

Not sure if I'll have to use the plugin eventually. Reading through similar issues I tried running build command in powershell and it just worked. Guessing it resolves the casing properly. This issue for me is in using bash shell for windows which I would like to be able to continue using if anyone has a fix for that.

shortpoet picture shortpoet on 26 Mar 2020

Not sure if I'll have to use the plugin eventually. Reading through similar issues I tried running build command in powershell and it just worked. Guessing it resolves the casing properly. This issue for me is in using bash shell for windows which I would like to be able to continue using if anyone has a fix for that.

Even me also getting the same as of now

devamiya picture devamiya on 26 Mar 2020

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.

akiander picture akiander on 3 Apr 2020
👍8 😄3

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 picture nsimeonov on 25 May 2020
👍1

Funny, I ended back here again. 6 months later.... Newish project, finally making a production build after a few hundred hours, doesn't build with vue cli :|

douglasg14b picture douglasg14b on 29 Jun 2020

@sodatea Why is this closed? Seems to be an ongoing problem that is often no fault of the user since it affects new projects with vanilla configs?

Vue CLI seems to insist that the path is upper case, but the actual path is lower case, where can this be changed?

image

vs

image

douglasg14b picture douglasg14b on 29 Jun 2020

I have same problems.

zdm picture zdm on 30 Jun 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 picture zincopper on 29 Jul 2020
👍2

I managed to fix the issue by going to the homescreen, removing the offending project from the list. And then importing the same folder containing the project (make sure the casing is correct, if not, switch to the parent directory first and then select the project folder again).

SteveVaneeckhout picture SteveVaneeckhout on 15 Sep 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 picture mekatrol on 16 Sep 2020
👍1

@mekatrol How we should use your script to find problematic paths?

zdm picture zdm on 17 Sep 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 picture zdm on 17 Sep 2020

Visual Studio Code is not the issue, npm packages are the issue, code doesn't care about the case but it does pass the incorrect case straight through to npm.

I use the function like:

Start in some root project folder (this is my base project folder which includes vue js and .net core sub folders)

This gets the current directory with case corrected

$pwd = Get-CaseSensitivePath (Resolve-Path -Path ./).Path

Save current location

Push-Location

change to my vue js project (using the correct case $pwd variable)

cd "$pwd[vue project directory]"

run my build (in this case $build mode is set to prod)

npm run "build_$buildMode"

Restore to original location

Pop-Location

mekatrol picture mekatrol on 17 Sep 2020

I only have this problem when I build on my Windows virtual machine. Everything builds fine on my Mac.

Building with npx (instead of npm run or yarn) resolves the issue. It's annoying to have to remember to use a different command when I build for Windows (I'm building an Electron app so have to build directly on the platform), but it works.

The worst part was that, when I built the electron app & it failed, I got zero debugging info. I couldn't even figure out what to search for to get me to this page and the solution until I spent ~3 days putting together different setups and trying to build. When I did just vue/vuetify and added css to the page, I finally got usable debugging info that led me here.

However, it did work with the electron/vue/vuetify project, so I'm quite satisfied.

mcasto picture mcasto on 4 Dec 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

JIANGYUJING1995 picture JIANGYUJING1995  ·  3Comments
OmgImAlexis picture OmgImAlexis  ·  3Comments
jgribonvald picture jgribonvald  ·  3Comments
csakis picture csakis  ·  3Comments
Benzenes picture Benzenes  ·  3Comments