Unable to run "vue-cli-service serve" [vue 3] - vue.js

Question

PROBLEM
I'm trying to update packages and ran ncu -u once I did that I ran npm install to apply the new updates but it wouldn't work. It appear that it gave me issues with eslint??? Though I tried replicating the problem so I could post the error here and I can't seem to get it but if I remember correctly I had to do npm install --legacy-peer-deps. Anyways once I applied that it installs but once I try running npm run serve I get an error.
WHAT I'VE TRIED
I've checked the versions of each package and they all are updated to the most recent version. I've deleted the "package-lock.json" and "node_modules" and reinstalled them. I'm pretty stumped what it could be. I looked up on some other stackoverflow posts mentioning about clearing the cache too but that didn't work.
CONSOLE (when running npm run serve)
PS C:\Users\vdcam\Documents\GitHub\project-cc> npm run serve
> project-cc#0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
ERROR Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
"exclude": [
null
],
"use": [
{
"loader": "C:\\Users\\vdcam\\Documents\\GitHub\\project-cc\\node_modules\\cache-loader\\dist\\cjs.js",
"options": {
"cacheDirectory": "C:\\Users\\vdcam\\Documents\\GitHub\\project-cc\\node_modules\\.cache\\babel-loader",
"cacheIdentifier": "39d06afa"
},
"ident": "clonedRuleSet-38.use[0]"
},
{
"loader": "C:\\Users\\vdcam\\Documents\\GitHub\\project-cc\\node_modules\\babel-loader\\lib\\index.js",
"options": "undefined",
"ident": "undefined"
}
]
}
Error: Rule can only have one resource source (provided resource and test + include + exclude) in
{
"exclude": [
null
],
"use": [
{
"loader": "C:\\Users\\vdcam\\Documents\\GitHub\\project-cc\\node_modules\\cache-loader\\dist\\cjs.js",
"options": {
"cacheDirectory": "C:\\Users\\vdcam\\Documents\\GitHub\\project-cc\\node_modules\\.cache\\babel-loader",
"cacheIdentifier": "39d06afa"
},
"ident": "clonedRuleSet-38.use[0]"
},
{
"loader": "C:\\Users\\vdcam\\Documents\\GitHub\\project-cc\\node_modules\\babel-loader\\lib\\index.js",
"options": "undefined",
"ident": "undefined"
}
]
}
at checkResourceSource (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\#vue\cli-service\node_modules\webpack\lib\RuleSet.js:167:11)
at Function.normalizeRule (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\#vue\cli-service\node_modules\webpack\lib\RuleSet.js:198:4)
at C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\#vue\cli-service\node_modules\webpack\lib\RuleSet.js:110:20
at Array.map (<anonymous>)
at Function.normalizeRules (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\#vue\cli-service\node_modules\webpack\lib\RuleSet.js:109:17)
at new RuleSet (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\#vue\cli-service\node_modules\webpack\lib\RuleSet.js:104:24)
at new NormalModuleFactory (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\#vue\cli-service\node_modules\webpack\lib\NormalModuleFactory.js:115:18)
at Compiler.createNormalModuleFactory (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\#vue\cli-service\node_modules\webpack\lib\Compiler.js:636:31)
at Compiler.newCompilationParams (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\#vue\cli-service\node_modules\webpack\lib\Compiler.js:653:30)
at Compiler.compile (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\#vue\cli-service\node_modules\webpack\lib\Compiler.js:661:23)
at C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\#vue\cli-service\node_modules\webpack\lib\Watching.js:77:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:22:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\tapable\lib\Hook.js:154:20)
at Watching._go (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\#vue\cli-service\node_modules\webpack\lib\Watching.js:41:32)
at C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\#vue\cli-service\node_modules\webpack\lib\Watching.js:33:9
at Compiler.readRecords (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\#vue\cli-service\node_modules\webpack\lib\Compiler.js:529:11)
npm ERR! code 1
npm ERR! path C:\Users\vdcam\Documents\GitHub\project-cc
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c vue-cli-service serve
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\vdcam\AppData\Local\npm-cache\_logs\2021-03-24T03_03_44_891Z-debug.log
DEBUG LOG ("npm run serve")
0 verbose cli [
0 verbose cli 'C:\\Program Files\\nodejs\\node.exe',
0 verbose cli 'C:\\Users\\vdcam\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
0 verbose cli 'run',
0 verbose cli 'serve'
0 verbose cli ]
1 info using npm#7.7.0
2 info using node#v12.16.1
3 timing npm:load:whichnode Completed in 2ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:C:\Users\vdcam\AppData\Roaming\npm\node_modules\npm\npmrc Completed in 3ms
6 timing config:load:builtin Completed in 3ms
7 timing config:load:cli Completed in 1ms
8 timing config:load:env Completed in 0ms
9 timing config:load:file:C:\Users\vdcam\Documents\GitHub\project-cc\.npmrc Completed in 0ms
10 timing config:load:project Completed in 1ms
11 timing config:load:file:C:\Users\vdcam\.npmrc Completed in 1ms
12 timing config:load:user Completed in 1ms
13 timing config:load:file:C:\Users\vdcam\AppData\Roaming\npm\etc\npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:setEnvs Completed in 1ms
17 timing config:load Completed in 8ms
18 timing npm:load:configload Completed in 8ms
19 timing npm:load:setTitle Completed in 0ms
20 timing npm:load:setupLog Completed in 2ms
21 timing npm:load:cleanupLog Completed in 2ms
22 timing npm:load:configScope Completed in 0ms
23 timing npm:load:projectScope Completed in 0ms
24 timing npm:load Completed in 14ms
25 timing config:load:flatten Completed in 3ms
26 timing command:run Completed in 4496ms
27 verbose stack Error: command failed
27 verbose stack at ChildProcess.<anonymous> (C:\Users\vdcam\AppData\Roaming\npm\node_modules\npm\node_modules\#npmcli\promise-spawn\index.js:64:27)
27 verbose stack at ChildProcess.emit (events.js:311:20)
27 verbose stack at maybeClose (internal/child_process.js:1021:16)
27 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
28 verbose pkgid project-cc#0.1.0
29 verbose cwd C:\Users\vdcam\Documents\GitHub\project-cc
30 verbose Windows_NT 10.0.18363
31 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\vdcam\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "serve"
32 verbose node v12.16.1
33 verbose npm v7.7.0
34 error code 1
35 error path C:\Users\vdcam\Documents\GitHub\project-cc
36 error command failed
37 error command C:\WINDOWS\system32\cmd.exe /d /s /c vue-cli-service serve
38 verbose exit 1
I would appreciate the help very much!!! Thank You!

Answer 1

A couple issues:
Your project depends on vue-cli-service 4.x (which only uses Webpack 4) and on webpack 5. For Webpack 5, vue-cli-service 5.x is required. Note #babel/eslint-parser is also needed, and you'll have to configure parserOptions.parser to match. See package.json below.
No need for dev dependency on webpack, webpack-cli, or webpack-bundle-analyzer, since vue-cli-service already depends on webpack and webpack-bundle-analyzer (which pulls them in transitively), and webpack-cli is not used in your project.
These dependencies should fix the issue:
// package.json
{
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/eslint-parser": "^7.12.1",
"#vue/cli-plugin-babel": "~5.0.0-alpha.7",
"#vue/cli-plugin-eslint": "~5.0.0-alpha.7",
"#vue/cli-plugin-router": "~5.0.0-alpha.7",
"#vue/cli-service": "~5.0.0-alpha.7",
"#vue/compiler-sfc": "^3.0.7",
"eslint": "^7.22.0",
"eslint-plugin-vue": "^7.8.0",
},
"eslintConfig": {
"parserOptions": {
"parser": "#babel/eslint-parser"
},
},
...
}
GitHub PR

Answer 2

fix this was to revert changes in my package-lock.json.
Then a npm prune to remove unuseful packages and npm update to be up-to-date.