Having different errors with vue create and npm run serve

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.

Forgot to inform: npm: 6.14.15 node: v14.17.6 vue: @vue/cli 4.5.13 — Rafael Oliveira, Sep 10 '21 at 19:56
Deps weren't installed correctly. Remove node_modules and reinstall — Estus Flask, Sep 10 '21 at 21:11

score 0 · Answer 1 · answered Sep 10 '21 at 19:57

0

Try running:

$ npm install

in the same folder of your package.json file, then try it again.

answered Sep 10 '21 at 19:57

cavalcantelucas

1,362
3
12
34

Did that, but got the same error from the first code portion of my post – Rafael Oliveira Sep 10 '21 at 22:18

score 0 · Answer 2 · answered Sep 10 '21 at 20:15

0

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

answered Sep 10 '21 at 20:15

Israel Azemoh

1
1

Did that too. Deleted the \npm-cache, but got the same error from the first code portion of my post when trying to create – Rafael Oliveira Sep 10 '21 at 22:23

score 0 · Accepted Answer · answered Sep 11 '21 at 17:51

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!

Having different errors with vue create and npm run serve

3 Answers3