error deploying a Vue-express-mongodb webapp (MEVN) in heroku

Question

this is my first time uploading a project to Heroku. I have created a small web application using ExpressJS - MongoDB - VueJS, which works perfectly locally. When trying to upload it to Heroku using the Heroku - Github method (I'm not using Heroku-cli), I get the following error near the end of the process:

internal/modules/cjs/loader.js:818
throw err;
^
Error: Cannot find module '@vue/cli-plugin-eslint'
Require stack:
- /tmp/build_a092ddb4/client/node_modules/@vue/cli-service/lib/Service.js
- /tmp/build_a092ddb4/client/node_modules/@vue/cli-service/bin/vue-cli-service.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
at Function.Module._load (internal/modules/cjs/loader.js:667:27)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at idToPlugin (/tmp/build_a092ddb4/client/node_modules/@vue/cli-service/lib/Service.js:145:14)
at /tmp/build_a092ddb4/client/node_modules/@vue/cli-service/lib/Service.js:184:20
at Array.map (<anonymous>)
at Service.resolvePlugins (/tmp/build_a092ddb4/client/node_modules/@vue/cli-service/lib/Service.js:170:10)
at new Service (/tmp/build_a092ddb4/client/node_modules/@vue/cli-service/lib/Service.js:32:25)
at Object.<anonymous> (/tmp/build_a092ddb4/client/node_modules/@vue/cli-service/bin/vue-cli-service.js:15:17) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/tmp/build_a092ddb4/client/node_modules/@vue/cli-service/lib/Service.js',
'/tmp/build_a092ddb4/client/node_modules/@vue/cli-service/bin/vue-cli-service.js'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the client@0.1.0 build 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!     /tmp/npmcache.BrlqB/_logs/2022-02-18T04_31_38_608Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Food-Spending@1.0.0 build: `npm install --prefix client && npm run build --prefix client`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the Food-Spending@1.0.0 build 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!     /tmp/npmcache.BrlqB/_logs/2022-02-18T04_31_38_623Z-debug.log
-----> Build failed
   
   We're sorry this build is failing! You can troubleshoot common issues here:
   https://devcenter.heroku.com/articles/troubleshooting-node-deploys
   
   If you're stuck, please submit a ticket so we can help:
   https://help.heroku.com/
   
   Love,
   Heroku
   
!     Push rejected, failed to compile Node.js app.
!     Push failed

does anyone know why the process is failing in: module '@vue/cli-plugin-eslint'? Previously, it had been throwing errors in the deploy process with other dependencies related to @vue/cli-service, but I was able to solve them... however, I have not been able to find a solution for this error.

This is the code of the package.json file from the Vuejs side:

{
  "name": "client",
  "version": "0.1.0",
  "engines": {
     "node": "12.x"
   },
   "private": true,
   "scripts": {
       "serve": "vue-cli-service serve",
       "build": "vue-cli-service build",
       "lint": "vue-cli-service lint"
   },
  "dependencies": {
      "axios": "^0.25.0",
      "bootstrap": "^5.1.3",
      "bootstrap-vue": "^2.21.2",
      "core-js": "^3.6.5",
      "vue": "^2.6.14",
      "@vue/cli-service": "~4.5.0",
      "@vue/cli-plugin-babel": "~4.5.0"
  },
  "devDependencies": {
      "@vue/cli-plugin-babel": "~4.5.0",
      "@vue/cli-plugin-eslint": "~4.5.0",
      "@vue/cli-service": "~4.5.0",
      "babel-eslint": "^10.1.0",
      "eslint": "^6.7.2",
      "eslint-plugin-vue": "^6.2.2",
      "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
     "root": true,
     "env": {
       "node": true
     },
  "extends": [
     "plugin:vue/essential",
     "eslint:recommended"
  ],
  "parserOptions": {
      "parser": "babel-eslint"
   },
   "rules": {}
  },
 "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Answer 1

Finally, after searching hardly on inte.net, I solved the problem. I did the next:

NOTE: This change was done only for production.

First, I deleted the existing vue project, and I created a new one without eslint/formatted option. Then, in package.json and package-lock.json files, I added these "devDependencies" in "dependencies":

"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"vue-template-compiler": "^2.6.11"

the update in package.json file:

"dependencies": {
  "axios": "^0.25.0",
  "bootstrap": "^5.1.3",
  "bootstrap-vue": "^2.21.2",
  "core-js": "^3.6.5",
  "vue": "^2.6.14",
  "@vue/cli-plugin-babel": "~4.5.0",
  "@vue/cli-service": "~4.5.0",
  "vue-template-compiler": "^2.6.11"
},
"devDependencies": {
  "@vue/cli-plugin-babel": "~4.5.0",
  "@vue/cli-service": "~4.5.0",
  "vue-template-compiler": "^2.6.11"
},

With these changes my application was finally deployed and working as expected. I'm not sure if this is the best solution or if there are other better solutions, but I'll find out.