No module factory available for dependency type: CssDependency.

huangapple go评论73阅读模式
英文:

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

问题

Here's the translated content you requested:

当我使用 vue-cli@3 运行 npm run build 时,系统提示出现了以下错误 No module factory available for dependency type: CssDependency。我已经搜索了很多相关的问题,但它们都与 Angular 有关,而且我也尝试了以下操作:

  1. 删除 node_modules 文件夹
  2. 删除 package-lock.json 文件
  3. 运行 npm i 命令

但是这个错误仍然存在,我想知道如何解决这个问题。

以下是我的错误详情:

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

接下来是我的 package.json 文件内容:

{
  "name": "hitokoto",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.4.4",
    "jquery": "^3.4.1",
    "jquery-ui": "^1.12.1",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-prettier": "^5.0.0",
    ...
  }
}

Please note that I've provided the translated content only, as requested.

英文:

when I used vue-cli@3 to

npm run build

system hint generate this error No module factory available for dependency type: CssDependency

I have searched a lot of related questions, but they are all angular,And i also tried

  1. rm -r node_modules
  2. rm package-lock.json
  3. npm i

But this error still occurs,I want to know how can I solve this problem

Here are the details of my error

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

Then below is my package.json file

{
  "name": "hitokoto",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.4.4",
    "jquery": "^3.4.1",
    "jquery-ui": "^1.12.1",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-prettier": "^5.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.0.0",
    "prettier": "^1.19.1",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "vue-template-compiler": "^2.6.10"
  }
}

答案1

得分: 72

我遇到了相同的问题,并发现与运行npm run build命令时使用的路径的大小写有关。

我使用PowerShell或cmd,执行了以下操作:

C:\> cd C:\git\testing
C:\git\testing> npm run build

结果得到了与你相同的错误。

然后我执行了以下操作(注意大写的GIT):

C:\> cd C:\GIT\testing
C:\GIT\testing> npm run build

然后它就正常工作了。我使用的是Windows 10。

英文:

I had the same issue, and figured out it was related to the upper/lower casing of the path used when running the npm run build command.

Using either Powershell or cmd, I did this:

C:\> cd C:\git\testing
C:\git\testing> npm run build

and got the same error as you.

Then I did this (notice uppercase GIT):

C:\>cd C:\GIT\testing
C:\GIT\testing> npm run build

and then it worked. I'm on Windows 10.

答案2

得分: 4

这可能是由 MiniCssExtractPlugin 引起的,
应该同时在 module/rulesplugins 中使用

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 定义模块规则
{
	test:/\.css$/, 
	use:[{loader: MiniCssExtractPlugin.loader},{loader:'css-loader'}]
},

// 设置插件
plugins:[
 new vueLoaderPlugin(), new MiniCssExtractPlugin()
]

更多信息请查看这里:https://github.com/webpack-contrib/mini-css-extract-plugin/issues/493

英文:

this may be caused by MiniCssExtractPlugin ,
it should be used both module/rules and plugins

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//define module\rules
{
	test:/\.css$/, 
	use:[{loader: MiniCssExtractPlugin.loader},{loader:'css-loader'}]
},

//set plugins
plugins:[
 new vueLoaderPlugin(), new MiniCssExtractPlugin()
]

more info see here: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/493

答案3

得分: 0

你可以尝试这个。这种方法对我有效。在你的 vue.config.js 中添加以下内容:

css: {
 extract: false
}
英文:

You can also try this. this method worked for me. In your vue.config.js add this:

css: {
 extract: false
}

答案4

得分: 0

在我的情况下,我执行了以下命令:

npm run build

从GIT bash中并遇到了问题。可能是由于文件路径大小写问题。我切换回普通的命令行,它就正常工作了。

英文:

In my case I executed

> npm run build

from GIT bash and faced the issue. Probably due to file paths case (upper/lower) issue. I switched back to normal command line and it is working.

huangapple
  • 本文由 发表于 2020年1月3日 20:53:12
  • 转载请务必保留本文链接:https://go.coder-hub.com/59578996.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定