rlindskog / vueniverse

Full stack, user based, PWA, Vue template.
MIT License
335 stars 48 forks source link

Stopped by snackbar #10

Closed JLKM closed 6 years ago

JLKM commented 6 years ago

After having installed the updated code after this fix I managed to get something shown on localhost:3000 on my Windows 10 laptop.

But no rocket or anything similar...

Instead I got this error message about snackbar: src/client/layouts/default.vue:150: VueComponent.get:

 },
  computed: {
    snackbar: {
      get () {
        return this.$store.state.toast.snackbar
      },
      set (value) {
        this.$store.commit('toast/UPDATE_SNACKBAR', value)
      }
    }
  }

along with this error message: src/client/layouts/default.vue:163: Proxy.render:

Missing stack frames

Haven't got a clue, what might be the problem here. Could it be the fact, that

  1. I'm activating mongod manually in a separate terminal (npm run start-db won't work in my setup)?
  2. Nuxt is getting updated frequently due to the present intense v. 1.0 development?
  3. Would it be better to hold the horses, until Nuxt 1.0 hits the street?

My log for further reference:

PS F:\frontend\vue\fullstack> vue init rlindskog/vueniverse vueniverse

? Target directory exists. Continue? Yes
? Project name testandenrunde
? Project description A Vueniverse project
? Author Jan Larsen
? Choose a session strategy (for blacklisting JWTs) in-memory

   vue-cli · Generated "vueniverse".

   To get started:

     cd vueniverse
     npm install
     npm run start-db
     npm run dev

   Documentation can be found at https://www.github.com/rlindskog/vueniverse

PS F:\frontend\vue\fullstack> cd vueniverse
PS F:\frontend\vue\fullstack\vueniverse> npm install
npm WARN deprecated node-uuid@1.4.8: Use uuid module instead

> uglifyjs-webpack-plugin@0.4.6 postinstall F:\frontend\vue\fullstack\vueniverse\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

> nuxt@1.0.0-rc8 postinstall F:\frontend\vue\fullstack\vueniverse\node_modules\nuxt
> opencollective postinstall || exit 0

     *** Thank you for using nuxt! ***

Please consider donating to our open collective
     to help us maintain this package.

  https://opencollective.com/nuxtjs/donate

                    ***

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@2.1.0 requires a peer of ajv@>=5.0.0 but none was installed.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (
current: {"os":"win32","arch":"x64"})

added 1429 packages in 142.039s
PS F:\frontend\vue\fullstack\vueniverse> npm run start-db

> testandenrunde@0.0.1 start-db F:\frontend\vue\fullstack\vueniverse
> mongod --fork --dbpath ./db/data --logpath ./db/logs/mongodb.log

Error parsing command line: unrecognised option '--fork'
try 'mongod --help' for more information
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! testandenrunde@0.0.1 start-db: `mongod --fork --dbpath ./db/data --logpath ./db/logs/mongodb.log`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the testandenrunde@0.0.1 start-db 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\Jan\AppData\Roaming\npm-cache\_logs\2017-08-31T12_26_13_503Z-debug.log
PS F:\frontend\vue\fullstack\vueniverse> npm run start-db

> testandenrunde@0.0.1 start-db F:\frontend\vue\fullstack\vueniverse
> mongod --fork --dbpath ./db/data --logpath ./db/logs/mongodb.log

Error parsing command line: unrecognised option '--fork'
try 'mongod --help' for more information
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! testandenrunde@0.0.1 start-db: `mongod --fork --dbpath ./db/data --logpath ./db/logs/mongodb.log`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the testandenrunde@0.0.1 start-db 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\Jan\AppData\Roaming\npm-cache\_logs\2017-08-31T12_26_38_682Z-debug.log
PS F:\frontend\vue\fullstack\vueniverse> npm run dev

> testandenrunde@0.0.1 dev F:\frontend\vue\fullstack\vueniverse
> backpack dev

 DONE  Compiled successfully in 2444ms                                                                              14:27:04

Server listening on http://127.0.0.1:3000
Build completed in 23.586s

 DONE  Compiled successfully in 23591ms                                                                             14:27:36

[Vue warn]: Error in render function: "TypeError: Cannot read property 'snackbar' of undefined"

found in

---> <Default> at src\client\layouts\default.vue
       <Root>
[Vue warn]: Error in render function: "TypeError: Cannot read property 'snackbar' of undefined"

found in

---> <Default> at src\client\layouts\default.vue
       <Root>
rlindskog commented 6 years ago

Fixed the snackbar problem. Just changed toast to notification like

computed: {
  snackbar: {
    get () {
      return this.$store.state.notification.snackbar
    },
    set (value) {
      this.$store.commit('notification/UPDATE_SNACKBAR', value)
    }
}

As for mongo, try running npm run stop-db then npm run start-db. If that doesn't work, try deleting the db folder with and creating another with data and logs folders in it like

├── db/
│   ├── data/
│   ├── logs/

then npm run start-db

JLKM commented 6 years ago

Thank you very much for your fast assistance.

I now managed to get through to the rocket on localhost:3000 in Windows. And creating a user also went well.

For your information: npm run stop-db og npm run start-db didn't work out (see log below). However, firing up mongod on a blank Mongo-database and in a separate terminal-window before npm run dev did the trick.

PS F:\frontend\vue\fullstack\vueniverse> npm run stop-db

> septembertest@0.0.1 stop-db F:\frontend\vue\fullstack\vueniverse
> mongo --eval "db.getSiblingDB('admin').shutdownServer()"

MongoDB shell version v3.4.7
connecting to: mongodb://127.0.0.1:27017
2017-09-01T10:51:16.213+0200 W NETWORK  [thread1] Failed to connect to 127.0.0.1:27017 after 5000ms millisec
onds, giving up.
2017-09-01T10:51:16.214+0200 E QUERY    [thread1] Error: couldn't connect to server 127.0.0.1:27017, connect
ion attempt failed :
connect@src/mongo/shell/mongo.js:237:13
@(connect):1:6
exception: connect failed
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! septembertest@0.0.1 stop-db: `mongo --eval "db.getSiblingDB('admin').shutdownServer()"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the septembertest@0.0.1 stop-db 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\Jan\AppData\Roaming\npm-cache\_logs\2017-09-01T08_51_16_236Z-debug.log
PS F:\frontend\vue\fullstack\vueniverse> npm start-db

Usage: npm <command>

where <command> is one of:
    access, adduser, bin, bugs, c, cache, completion, config,
    ddp, dedupe, deprecate, dist-tag, docs, doctor, edit,
    explore, get, help, help-search, i, init, install,
    install-test, it, link, list, ln, login, logout, ls,
    outdated, owner, pack, ping, prefix, prune, publish, rb,
    rebuild, repo, restart, root, run, run-script, s, se,
    search, set, shrinkwrap, star, stars, start, stop, t, team,
    test, tst, un, uninstall, unpublish, unstar, up, update, v,
    version, view, whoami

npm <command> -h     quick help on <command>
npm -l           display full usage info
npm help <term>  search for help on <term>
npm help npm     involved overview

Specify configs in the ini-formatted file:
    C:\Users\Jan\.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

npm@5.3.0 C:\Users\Jan\AppData\Roaming\npm\node_modules\npm
PS F:\frontend\vue\fullstack\vueniverse> npm run start-db

> septembertest@0.0.1 start-db F:\frontend\vue\fullstack\vueniverse
> mongod --fork --dbpath ./db/data --logpath ./db/logs/mongodb.log

Error parsing command line: unrecognised option '--fork'
try 'mongod --help' for more information
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! septembertest@0.0.1 start-db: `mongod --fork --dbpath ./db/data --logpath ./db/logs/mongodb.log`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the septembertest@0.0.1 start-db 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\Jan\AppData\Roaming\npm-cache\_logs\2017-09-01T08_51_49_951Z-debug.log
PS F:\frontend\vue\fullstack\vueniverse> npm run start-db

> septembertest@0.0.1 start-db F:\frontend\vue\fullstack\vueniverse
> mongod --fork --dbpath ./db/data --logpath ./db/logs/mongodb.log

Error parsing command line: unrecognised option '--fork'
try 'mongod --help' for more information
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! septembertest@0.0.1 start-db: `mongod --fork --dbpath ./db/data --logpath ./db/logs/mongodb.log`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the septembertest@0.0.1 start-db 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\Jan\AppData\Roaming\npm-cache\_logs\2017-09-01T08_54_20_341Z-debug.log
PS F:\frontend\vue\fullstack\vueniverse> npm run dev

> septembertest@0.0.1 dev F:\frontend\vue\fullstack\vueniverse
> backpack dev

 DONE  Compiled successfully in 2336ms                                                              11:12:55

Server listening on http://127.0.0.1:3000
Build completed in 22.305s

 DONE  Compiled successfully in 22302ms                                                             11:13:27

fetchUser pending...
fetchUser success!
rlindskog commented 6 years ago

It looks like --fork is actually a UNIX thing, so it is necessary for windows user to start mongo in a separate terminal window for now.