Having different errors with vue create and npm run serve - vue.js

Question

I'm new to vue and I'm having different errors trying to create new projects with vue create and executing npm run serve.
I've already tried reinstalling node and vue. Changed some PATH, but nothing worked.
First I created the application with:
vue create routing-overview
Then i got this in the final part:
added 1259 packages from 656 contributors in 37.319s
🚀 Invoking generators...
📦 Installing additional dependencies...
npm ERR! code EEXIST
npm ERR! path C:\Users\USER\Estudos\igti\m04-vue\routing-overview\node_modules\#babel\parser\bin\babel-parser.js
npm ERR! dest C:\Users\USER\Studies\m04-vue\routing-overview\parser
npm ERR! EEXIST: file already exists, cmd shim 'C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\#babel\parser\bin\babel-parser.js' -> 'C:\Users\USER\Studies\m04-vue\routing-overview\parser'
npm ERR! File exists: C:\Users\USER\Studies\m04-vue\routing-overview\parser
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\USER\AppData\Roaming\npm-cache\_logs\2021-09-10T19_38_16_412Z-debug.log
ERROR command failed: npm install --loglevel error
Opening the project folder on VS Code I have this error in the first import of main.js:
Parsing error: Cannot find module 'babel-eslint'
Require stack:
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\vue-eslint-parser\index.js
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\eslint-plugin-vue\lib\utils\index.js
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\eslint-plugin-vue\lib\rules\array-bracket-newline.js
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\eslint-plugin-vue\lib\index.js
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\eslint\lib\cli-engine\config-array-factory.js
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\eslint\lib\cli-engine\cascading-config-array-factory.js
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\eslint\lib\cli-engine\cli-engine.js
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\eslint\lib\cli-engine\index.js
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\eslint\lib\api.js
- c:\Users\USER\.vscode\extensions\dbaeumer.vscode-eslint-2.1.25\server\out\eslintServer.js
And when I try to npm run serve, i have a different error:
> routing-overview#0.1.0 serve C:\Users\USER\Studies\m04-vue\routing-overview
> vue-cli-service serve
internal/modules/cjs/loader.js:892
throw err;
^
Error: Cannot find module '#vue/cli-plugin-babel'
Require stack:
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\#vue\cli-service\lib\Service.js
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\#vue\cli-service\bin\vue-cli-service.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
at Function.Module._load (internal/modules/cjs/loader.js:745:27)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at idToPlugin (C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\#vue\cli-service\lib\Service.js:145:14)
at C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\#vue\cli-service\lib\Service.js:184:20
at Array.map (<anonymous>)
at Service.resolvePlugins (C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\#vue\cli-service\lib\Service.js:170:10)
at new Service (C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\#vue\cli-service\lib\Service.js:32:25)
at Object.<anonymous> (C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\#vue\cli-service\bin\vue-cli-service.js:15:17) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\USER\\Studies\\m04-vue\\routing-overview\\node_modules\\#vue\\cli-service\\lib\\Service.js',
'C:\\Users\\USER\\Studies\\m04-vue\\routing-overview\\node_modules\\#vue\\cli-service\\bin\\vue-cli-service.js'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! routing-overview#0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the routing-overview#0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\USER\AppData\Roaming\npm-cache\_logs\2021-09-10T19_48_28_445Z-debug.log
And this is what I have on package.json:
{
"name": "routing-overview",
"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.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
I have no idea what is the problem. Any help is very much appreciated.

Answer 1

Try running:
$ npm install
in the same folder of your package.json file, then try it again.

Answer 2

Have you tried updating npm and node versions?. It's possible you need to update them.
Also, you can try cleaning npm cache data: npm cache clean --force . or you can do it manually by locating appData folder and then \npm-cache folder and delete it. then try running vue create routing-overview again

Answer 3

I was able to fix the problem, even not having a clue about what exactly was wrong.
I uninstalled vue and then Node from my PC. After that, I deleted any trace of node or npm from my PC following the comments from this post.
Then installed Node again and #vue/cli. Used npm init to create a new package.JSON and everything is working as expected right now.
Thanks for the help!