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

imran-iq · 2020-01-06T22:12:57Z

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

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

haoqunjiang · 2020-01-07T07:03:11Z

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

haoqunjiang · 2020-01-07T07:07:38Z

As of the linked issue, as it happened on a new project, it's more likely to be a path casing issue. See #5022 (comment)

imran-iq · 2020-01-07T19:04:08Z

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

douglasg14b · 2020-01-31T19:05:40Z

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?

zoomla · 2020-02-11T08:04:46Z

版

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](https://github.com/vuejs/vue-cli/issues/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

mmikitka · 2020-03-16T21:36:24Z

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"
  }

shortpoet · 2020-03-26T20:49:47Z

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.

devamiya · 2020-03-26T21:06:30Z

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

akiander · 2020-04-03T20:04:30Z

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.

nsimeonov · 2020-05-24T23:38:46Z

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?

douglasg14b · 2020-06-29T05:41:48Z

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 · 2020-06-29T05:43:54Z

@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?

vs

zdm · 2020-06-29T23:08:10Z

I have same problems.

zincopper · 2020-07-29T07:17:23Z

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.

SteveVaneeckhout · 2020-09-15T19:10:24Z

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).

mekatrol · 2020-09-16T00:20:09Z

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;

}

zdm · 2020-09-17T06:31:52Z

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

zdm · 2020-09-17T06:45:24Z

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.

mekatrol · 2020-09-17T09:37:44Z

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

mcasto · 2020-12-04T17:12:45Z

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.

TobiSchluter · 2021-01-16T06:06:35Z

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

haoqunjiang closed this as completed Jan 7, 2020

morewry mentioned this issue Jan 16, 2020

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

Closed

jpmarques66 mentioned this issue Mar 31, 2020

chore(workspace): add mini-css-extract-plugin reach4help/reach4help#230

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

imran-iq commented Jan 6, 2020

haoqunjiang commented Jan 7, 2020

haoqunjiang commented Jan 7, 2020 •

edited

Loading

imran-iq commented Jan 7, 2020

douglasg14b commented Jan 31, 2020

zoomla commented Feb 11, 2020

版

复制链接

环境信息

重现步骤

期望什么？

实际发生了什么？

Version

Reproduction link

Environment info

Steps to reproduce

What is expected?

What is actually happening?

mmikitka commented Mar 16, 2020

shortpoet commented Mar 26, 2020

devamiya commented Mar 26, 2020

akiander commented Apr 3, 2020 •

edited

Loading

nsimeonov commented May 24, 2020

douglasg14b commented Jun 29, 2020

douglasg14b commented Jun 29, 2020 •

edited

Loading

zdm commented Jun 29, 2020

zincopper commented Jul 29, 2020

SteveVaneeckhout commented Sep 15, 2020

mekatrol commented Sep 16, 2020

zdm commented Sep 17, 2020

zdm commented Sep 17, 2020

mekatrol commented Sep 17, 2020 •

edited

Loading

mcasto commented Dec 4, 2020

TobiSchluter commented Jan 16, 2021

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

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

Comments

imran-iq commented Jan 6, 2020

Version

Reproduction link

Environment info

Steps to reproduce

What is expected?

What is actually happening?

haoqunjiang commented Jan 7, 2020

haoqunjiang commented Jan 7, 2020 • edited Loading

imran-iq commented Jan 7, 2020

douglasg14b commented Jan 31, 2020

zoomla commented Feb 11, 2020

版

复制链接

环境信息

重现步骤

期望什么？

实际发生了什么？

Version

Reproduction link

Environment info

Steps to reproduce

What is expected?

What is actually happening?

mmikitka commented Mar 16, 2020

shortpoet commented Mar 26, 2020

devamiya commented Mar 26, 2020

akiander commented Apr 3, 2020 • edited Loading

nsimeonov commented May 24, 2020

douglasg14b commented Jun 29, 2020

douglasg14b commented Jun 29, 2020 • edited Loading

zdm commented Jun 29, 2020

zincopper commented Jul 29, 2020

SteveVaneeckhout commented Sep 15, 2020

mekatrol commented Sep 16, 2020

zdm commented Sep 17, 2020

zdm commented Sep 17, 2020

mekatrol commented Sep 17, 2020 • edited Loading

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

Save current location

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

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

Restore to original location

mcasto commented Dec 4, 2020

TobiSchluter commented Jan 16, 2021

haoqunjiang commented Jan 7, 2020 •

edited

Loading

akiander commented Apr 3, 2020 •

edited

Loading

douglasg14b commented Jun 29, 2020 •

edited

Loading

mekatrol commented Sep 17, 2020 •

edited

Loading