英文:
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 有关,而且我也尝试了以下操作:
- 删除 node_modules 文件夹
- 删除 package-lock.json 文件
- 运行 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
- rm -r node_modules
- rm package-lock.json
- 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/rules 和 plugins 中使用
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论