Vue/Node error : Rule can only have one resource source - node.js

Question

I am brand new to Vue and Node and everything was going well with a Vue3 project I was messing around with to learn. I wanted to use scss files so installed sass-loader via npm using:
npm install sass-loader sass webpack --save-dev
And since then the app is broken, now when I try to serve I get the following error:
Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
"exclude": [
null
],
"use": [
{
"loader": "C:\\pathtoapp\\node_modules\\cache-loader\\dist\\cjs.js",
"options": {
"cacheDirectory": "C:\\pathtoapp\\node_modules\\.cache\\babel-loader",
"cacheIdentifier": "43be597c"
},
"ident": "clonedRuleSet-38.use[0]"
},
{
"loader": "C:\\pathtoapp\\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:\\pathtoapp\\node_modules\\cache-loader\\dist\\cjs.js",
"options": {
"cacheDirectory": "C:\\pathtoapp\\node_modules\\.cache\\babel-loader",
"cacheIdentifier": "43be597c"
},
"ident": "clonedRuleSet-38.use[0]"
},
{
"loader": "C:\\pathtoapp\\node_modules\\babel-loader\\lib\\index.js",
"options": "undefined",
"ident": "undefined"
}
]
}
I looked up this error and most believed this to be an issue with webpack but I have uninstalled and installed again. Installed an earlier version of webpack, tried changing package.json to point to an earlier version, tried anything I can currently find on SO and now I'm completely stumped.
Any assistance on this would be much appreciated as I'd rather learn and discover how to fix the problem should I encounter it again rather than simply start a new project. Let me know any code/files I should post in an edit where required.

Answer 1

I ran into the same issue and I was able to resolve it by:
rm -rf node_modules
rm package-lock.json
npm install --legacy-peer-deps
Source