Updates Not Reflected & Mongo Errors

[trebleCode]

Hi IceBob,

I went through alot of this today to resolve some dependencies bark messages from Git Bash.
After doing that, I'm still getting errors at the console about deprecated Mongo methods, and a messy error string. I've tried installing and importing mongo-autoinc-plugin, but to no avail, and have also tried changing the Device's startAt to various values, but to no effect. I see these errors whether after an immediate clone, or with my dependency resolution updates.

The main struggle has been finding out how to stop errors so that I can make changes to the boilerplate and have it show up on the page since it seems with these errors it will never fully render changes correctly.

Node: v8.11.4
npm: 5.6.0

Here's my current package.JSON and console output when trying to send npm run start

{
  "name": "vue-express-mongo-boilerplate",
  "version": "0.9.0",
  "title": "Vue-Express-Mongo BoilerPlate",
  "description": "Express NodeJS application server boilerplate with Mongo and VueJS",
  "main": "server/index.js",
  "scripts": {
    "build": "webpack --progress --colors --config build/webpack.prod.config.js",
    "build:server": "webpack --progress --colors --config build/webpack.server.config.js",
    "dev": "cross-env NODE_ENV=development nodemon --inspect",
    "docker-dev": "cross-env NODE_ENV=development MONGO_URI=mongodb://mongo/ nodemon --debug",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "start:bundle": "cross-env NODE_ENV=production node server/bundle.js",
    "start:cluster": "cross-env NODE_ENV=production node cluster.js",
    "test:unit": "cross-env NODE_ENV=test mocha --require babel-core/register --reporter spec tests/unit",
    "test:e2e:nightmare": "cross-env NODE_ENV=test mocha --require babel-core/register --timeout 30000 --reporter spec tests/e2e",
    "test:e2e": "node tests/e2e/runner.js",
    "test": "npm run test:unit && npm run test:e2e",
    "ci": "cross-env NODE_ENV=test nodemon --exec \"mocha --require babel-core/register --reporter dot --watch tests/unit\" tests/unit",
    "lint": "eslint --ext=.js,.vue client server",
    "lint:fix": "eslint --fix --ext=.js,.vue client server",
    "snyk-protect": "snyk protect",
    "typings": "typings install",
    "prepublish": "npm run snyk-protect",
    "prepare": "npm run snyk-protect"
  },
  "repository": {
    "type": "git",
    "url": "git@github.com:icebob/vue-express-mongo-boilerplate.git"
  },
  "keywords": [
    "boilerplate",
    "express",
    "mongo",
    "vue",
    "mongodb",
    "hackaton",
    "bootstrap",
    "starter"
  ],
  "config": {
    "dbName": "boilerplate"
  },
  "author": "Icebob",
  "license": "MIT",
  "dependencies": {
    "@babel/core": "^7.1.6",
    "acorn": "^6.0.4",
    "agenda": "2.0.2",
    "async": "2.6.1",
    "axios": "0.18.0",
    "bcrypt-nodejs": "0.0.3",
    "body-parser": "1.18.3",
    "chalk": "2.4.1",
    "cli-table2": "0.2.0",
    "clui": "0.3.6",
    "compression": "1.7.3",
    "connect-mongo": "2.0.2",
    "cookie-parser": "1.4.3",
    "cross-env": "5.2.0",
    "csurf": "1.9.0",
    "express": "4.16.4",
    "express-flash": "0.0.2",
    "express-list-endpoints": "4.0.0",
    "express-session": "1.15.6",
    "express-status-monitor": "1.2.3",
    "express-validator": "5.3.0",
    "fakerator": "0.3.0",
    "glob": "7.1.3",
    "graphql": "^0.13.2",
    "graphql-server-express": "1.4.0",
    "graphql-subscriptions": "1.0.0",
    "graphql-tools": "4.0.3",
    "hashids": "1.2.2",
    "helmet": "3.15.0",
    "helmet-crossdomain": "0.3.0",
    "i18next": "12.1.0",
    "i18next-express-middleware": "1.5.0",
    "i18next-node-fs-backend": "2.1.0",
    "ioredis": "4.2.0",
    "le_node": "1.8.0",
    "lodash": "4.17.11",
    "method-override": "3.0.0",
    "mkdirp": "0.5.1",
    "moment": "2.22.2",
    "mongoose": "^4.13.17",
    "mongoose-auto-increment": "5.0.1",
    "mongoose-plugin-autoinc": "^1.1.9",
    "morgan": "1.9.1",
    "netjet": "1.3.0",
    "node-gyp": "^3.8.0",
    "node-sass": "4.10.0",
    "nodemailer": "4.7.0",
    "nodemailer-html-to-text": "3.0.0",
    "nodemailer-mailgun-transport": "1.4.0",
    "nodemailer-sendgrid-transport": "0.2.0",
    "object-hash": "1.3.1",
    "passport": "0.4.0",
    "passport-facebook": "2.1.1",
    "passport-github": "1.1.0",
    "passport-google-oauth": "1.0.0",
    "passport-local": "1.0.0",
    "passport-localapikey-update": "0.6.0",
    "passport-twitter": "1.0.4",
    "pretty-bytes": "5.1.0",
    "pug": "2.0.3",
    "require-webpack-compat": "3.0.0",
    "serve-favicon": "2.5.0",
    "slug": "0.9.2",
    "snyk": "1.110.2",
    "socket.io": "2.1.1",
    "socket.io-client": "2.1.1",
    "socks": "^2.2.2",
    "uuid-token-generator": "1.0.0",
    "winston": "3.1.0",
    "winston-daily-rotate-file": "3.5.1",
    "winston-graylog2": "1.0.3",
    "winston-loggly-bulk": "2.0.3",
    "winston-logsene": "2.0.2",
    "winston-logzio": "3.0.2",
    "winston-papertrail": "1.0.5"
  },
  "devDependencies": {
    "apollo-client": "2.4.7",
    "autoprefixer": "9.3.1",
    "babel": "6.23.0",
    "babel-core": "6.26.3",
    "babel-loader": "8.0.4",
    "babel-plugin-transform-runtime": "6.23.0",
    "babel-preset-env": "1.7.0",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-stage-0": "6.24.1",
    "babel-runtime": "6.26.0",
    "chai": "4.2.0",
    "chromedriver": "2.44.0",
    "cross-env": "5.2.0",
    "cross-spawn": "6.0.5",
    "css-loader": "1.0.1",
    "del": "3.0.0",
    "es6-promise": "4.2.5",
    "eslint": "5.9.0",
    "eslint-friendly-formatter": "4.0.1",
    "eslint-loader": "2.1.1",
    "eslint-plugin-html": "5.0.0",
    "file-loader": "2.0.0",
    "graphql-tag": "2.10.0",
    "gulp-babel": "8.0.0",
    "i18next-browser-languagedetector": "2.2.4",
    "i18next-xhr-backend": "1.5.1",
    "jquery": "3.3.1",
    "json-loader": "0.5.7",
    "marked": "0.5.2",
    "mini-css-extract-plugin": "0.4.5",
    "mocha": "5.2.0",
    "nightwatch": "0.9.21",
    "nodemon": "1.18.6",
    "postcss-loader": "3.0.0",
    "precss": "4.0.0",
    "pug-plain-loader": "1.0.0",
    "raw-loader": "0.5.1",
    "request": "^2.88.0",
    "sass-loader": "7.1.0",
    "selenium-server": "3.141.59",
    "sinon": "^6.3.5",
    "sinon-chai": "3.2.0",
    "stats-webpack-plugin": "0.7.0",
    "style-loader": "0.23.1",
    "toastr": "2.1.4",
    "typings": "2.1.1",
    "url-loader": "1.1.2",
    "uuid": "3.3.2",
    "vue": "2.5.17",
    "vue-form-generator": "2.3.2",
    "vue-html-loader": "1.2.4",
    "vue-loader": "15.4.2",
    "vue-router": "3.0.2",
    "vue-template-compiler": "2.5.17",
    "vue-websocket": "0.2.3",
    "vuex": "3.0.1",
    "webpack": "4.26.0",
    "webpack-cli": "3.1.2",
    "webpack-dev-middleware": "3.4.0",
    "webpack-dev-server": "3.1.10",
    "webpack-hot-middleware": "2.24.3",
    "webpack-merge": "4.1.4"
  },
  "snyk": true
}

Console output:

$ npm run start

> vue-express-mongo-boilerplate@0.9.0 start C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate
> cross-env NODE_ENV=production node server/index.js

process.argv: C:\Program Files\nodejs\node.exe,C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\server\index.js
Application root path: C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate
Load production config...
{"message":{},"level":"info"}
{"level":"info","message":"---------------------[ Server starting at %s ]---------------------------"}
{"message":{},"level":"info"}
{"message":"Application root path: C:\\Users\\Pythagoras\\desktop\\vue-express-mongo-boilerplate","level":"info"}
{"message":{},"level":"info"}
{"message":"Connecting to Mongo mongodb://localhost/boilerplate...","level":"info"}
{"message":"","level":"info"}
{"message":"Search passport strategies...","level":"info"}
{"message":"  Loading passport strategy file apikey.js...","level":"info"}
{"message":"  Loading passport strategy file facebook.js...","level":"info"}
{"message":"  Loading passport strategy file github.js...","level":"info"}
{"message":"  Loading passport strategy file google.js...","level":"info"}
{"message":"  Loading passport strategy file local.js...","level":"info"}
{"message":"  Loading passport strategy file twitter.js...","level":"info"}
{"message":"","level":"info"}
{"message":"Search built-in services...","level":"info"}
{"level":"info","message":"  Load"}
{"message":"","level":"info"}
{"message":"Search applogic services...","level":"info"}
{"level":"info","message":"  Load"}
{"level":"info","message":"  Load"}
{"level":"info","message":"  Load"}
{"level":"info","message":"  Load"}
{"level":"info","message":"  Load"}
{"level":"info","message":"  Load"}
(node:6432) DeprecationWarning: `open()` is deprecated in mongoose >= 4.11.0, use `openUri()` instead, or set the `useMongoClient` option if using `connect()` or `createConnection()`. See http://mongoosejs.com/docs/4.x/docs/connections.html#use-mongo-client
(node:6432) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect.
{"error":{"code":"EADDRINUSE","errno":"EADDRINUSE","syscall":"listen","address":"0.0.0.0","port":3000},"level":"error","message":"uncaughtException: listen EADDRINUSE 0.0.0.0:3000\nError: listen EADDRINUSE 0.0.0.0:3000\n    at Object._errnoException (util.js:992:11)\n    at _exceptionWithHostPort (util.js:1014:20)\n    at Server.setupListenHandle [as _listen2] (net.js:1355:14)\n    at listenInCluster (net.js:1396:12)\n    at doListen (net.js:1505:7)\n    at _combinedTickCallback (internal/process/next_tick.js:141:11)\n    at process._tickCallback (internal/process/next_tick.js:180:9)\n    at Function.Module.runMain (module.js:695:11)\n    at startup (bootstrap_node.js:191:16)\n    at bootstrap_node.js:612:3","stack":"Error: listen EADDRINUSE 0.0.0.0:3000\n    at Object._errnoException (util.js:992:11)\n    at _exceptionWithHostPort (util.js:1014:20)\n    at Server.setupListenHandle [as _listen2] (net.js:1355:14)\n    at listenInCluster (net.js:1396:12)\n    at doListen (net.js:1505:7)\n    at _combinedTickCallback (internal/process/next_tick.js:141:11)\n    at process._tickCallback (internal/process/next_tick.js:180:9)\n    at Function.Module.runMain (module.js:695:11)\n    at startup (bootstrap_node.js:191:16)\n    at bootstrap_node.js:612:3","exception":true,"date":"Fri Nov 23 2018 16:48:24 GMT-0500 (Eastern Standard Time)","process":{"pid":6432,"uid":null,"gid":null,"cwd":"C:\\Users\\Pythagoras\\desktop\\vue-express-mongo-boilerplate","execPath":"C:\\Program Files\\nodejs\\node.exe","version":"v8.11.4","argv":["C:\\Program Files\\nodejs\\node.exe","C:\\Users\\Pythagoras\\desktop\\vue-express-mongo-boilerplate\\server\\index.js"],"memoryUsage":{"rss":100569088,"heapTotal":78327808,"heapUsed":55879416,"external":56249257}},"os":{"loadavg":[0,0,0],"uptime":11583.0660372},"trace":[{"column":11,"file":"util.js","function":"Object._errnoException","line":992,"method":"_errnoException","native":false},{"column":20,"file":"util.js","function":"_exceptionWithHostPort","line":1014,"method":null,"native":false},{"column":14,"file":"net.js","function":"Server.setupListenHandle [as _listen2]","line":1355,"method":"setupListenHandle [as _listen2]","native":false},{"column":12,"file":"net.js","function":"listenInCluster","line":1396,"method":null,"native":false},{"column":7,"file":"net.js","function":"doListen","line":1505,"method":null,"native":false},{"column":11,"file":"internal/process/next_tick.js","function":"_combinedTickCallback","line":141,"method":null,"native":false},{"column":9,"file":"internal/process/next_tick.js","function":"process._tickCallback","line":180,"method":"_tickCallback","native":false},{"column":11,"file":"module.js","function":"Module.runMain","line":695,"method":"runMain","native":false},{"column":16,"file":"bootstrap_node.js","function":"startup","line":191,"method":null,"native":false},{"column":3,"file":"bootstrap_node.js","function":null,"line":612,"method":null,"native":false}]}
{"message":"Mongo DB connected.","level":"info"}
{"message":{},"level":"info"}
{"message":"Seeding done!","level":"debug"}
(node:6432) UnhandledPromiseRejectionWarning: MongoError: The field 'required' is not valid for an index specification. Specification: { ns: "boilerplate.identitycounters", key: { field: 1, model: 1 }, name: "field_1_model_1", unique: true, required: true, index: -1, background: true }
    at Function.MongoError.create (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\mongoose\node_modules\mongodb-core\lib\error.js:31:11)
    at C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\mongoose\node_modules\mongodb\lib\db.js:1096:80
    at C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\mongoose\node_modules\mongodb-core\lib\connection\pool.js:469:18
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
(node:6432) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:6432) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
{"message":"Agenda started!","level":"info"}

Any assistance here would be greatly appreciated.

[dimylik]

You know what I did, as I am lazy, I was using public mongolab.com service
create an account, add mongo schema, username/password, go to root config.js, in the project
set:

db: {
uri: process.env.MONGO_URI || "mongodb://vue-mongo-user:vue-mongo-password123@ds12-bla-bla.mlab.com:21413/vue-mongo",
options: {
// user: process.env.MONGO_USERNAME || "",
// pass: process.env.MONGO_PASSWORD || "",
useNewUrlParser: true
}
}

works perfect, until you have internet connection!

[trebleCode]

Cheers @dimylik , I was able to set up an account on mLab to test with, and that resolves the EADDRINUSE issue after I set a random port, but I still get this in the console:

(node:20368) UnhandledPromiseRejectionWarning: MongoError: The field 'required' is not valid for an index specification. Specification: { ns: "testdbscott.identitycounters", key: { field: 1, model: 1 }, name: "field_1_model_1", unique: true, required: true, index: -1, background: true }
    at Function.MongoError.create (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\mongoose\node_modules\mongodb-core\lib\error.js:31:11)
    at C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\mongoose\node_modules\mongodb\lib\db.js:1096:80
    at C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\mongoose\node_modules\mongodb-core\lib\connection\pool.js:469:18
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
(node:20368) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:20368) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

When I used the mLab account to connect to, that broke all of the styling on the page, and after authenticating with the test credentials, it just rendered a blank page.

What I'm really trying to understand though, is if you make a change to something in a Vue component, for example:

In the file /client/app/modules/home/index.vue, if I change the line on line 53:
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 éáűőúöüóí ÉÁŰŐÚÖÜÓÍ

to
LOOK AT ALL THE THINGS

save the index.vue file and refresh the page, nothing from that change is reflected in the page HTML. Why? Is it because of that unhandled async error, or something else. We are really wanting to use this boilerplate for a project, but not being able to modify anything is an obvious blocker.

I don't seem to get any errors other than the async error with npm run start but if I use npm run dev, I get a super long babel error:

ERROR in ./client/app/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\babel-preset-es2015\lib\index.js
    at createDescriptor (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\config-descriptors.js:178:11)
    at items.map (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
    at createPresetDescriptors (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\config-descriptors.js:101:10)
    at presets (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\config-descriptors.js:47:19)
    at mergeChainOpts (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\config-chain.js:320:26)
    at C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\config-chain.js:283:7
    at buildRootChain (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\config-chain.js:120:22)
    at loadPrivatePartialConfig (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\partial.js:85:55)
    at Object.loadPartialConfig (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\partial.js:110:18)
    at Object.<anonymous> (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\babel-loader\lib\index.js:140:26)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\babel-loader\lib\index.js:3:103)
    at _next (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\babel-loader\lib\index.js:5:194)
    at C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\babel-loader\lib\index.js:5:364
 @ multi webpack-hot-middleware/client ./client/app/main.js app[1]

ERROR in ./client/frontend/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\babel-preset-es2015\lib\index.js
    at createDescriptor (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\config-descriptors.js:178:11)
    at items.map (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
    at createPresetDescriptors (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\config-descriptors.js:101:10)
    at presets (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\config-descriptors.js:47:19)
    at mergeChainOpts (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\config-chain.js:320:26)
    at C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\config-chain.js:283:7
    at buildRootChain (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\config-chain.js:120:22)
    at loadPrivatePartialConfig (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\partial.js:85:55)
    at Object.loadPartialConfig (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\@babel\core\lib\config\partial.js:110:18)
    at Object.<anonymous> (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\babel-loader\lib\index.js:140:26)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\babel-loader\lib\index.js:3:103)
    at _next (C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\babel-loader\lib\index.js:5:194)
    at C:\Users\Pythagoras\desktop\vue-express-mongo-boilerplate\node_modules\babel-loader\lib\index.js:5:364
 @ multi webpack-hot-middleware/client ./client/frontend/main.js frontend[1]

Either way, any further help figuring any of this out would be greatly appreciated.