Error: No module factory available for dependency type: CssDependency

[imran-iq]

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

[haoqunjiang]

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]

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]

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]

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]

版

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]

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]

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]

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]

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]

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]

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]

@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