VueJS invalid object - nie wiadomo o co chodzi

0

Robię sobie aplikacje w VueJS i firebase według tego poradnika https://medium.com/@anas.mammeri/vue-2-firebase-how-to-build-a-vue-app-with-firebase-authentication-system-in-15-minutes-fdce6f289c3c jednak napotkałem dość spory błąd, którego ciężko naprawić. Otóż w punkcie czwartym jest kod który i ja napisałem:

main.js

import firebase from 'firebase';
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import VueMaterial from 'vue-material';
import 'vue-material/dist/vue-material.min.css';
import 'vue-material/dist/theme/default.css';


Vue.config.productionTip = false;

let app = '';

const firebaseConfig = {
  //TUTAJ MOJA KONIGURACJA FIREBASE KTORA DZIALA
};

firebase.initializeApp(firebaseConfig);

Vue.use(VueMaterial);

firebase.auth().onAuthStateChanged(() => {
  if(!app){
    app = new Vue({
      router,
      render: h => h(App),
    }).$mount('#app');
  }
})

Vue.material = {
  ripple: true,
  theming : {},
  locale: {
    dateFormat: 'dd/MM/yyyy',
    startYear: 1939,
    endYear: 2099,
    firstDayOfAWeek: 1,
    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    shortDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    shorterDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
    shorterMonths: ['J', 'F', 'M', 'A', 'M', 'Ju', 'Ju', 'A', 'Se', 'O', 'N', 'D'],
  },
}

cała nawigacja się popsuła tzn. biały ekran i nic a w konsoli to:
screenshot-20190717171349.png

Nie mam do tego sił. Przecież zrobiłem wszystko jak w poradniku.

0

Pokaż źródło dla router, bo to z nim jest chyba problem. I rozwiń ten Invalid Object tak żeby było widać co zawiera.

0

@Markuz:
router.js

import Vue from 'vue';
import Router from 'vue-router';
import Welcome from './views/Welcome.vue';
import SignIn from './views/SignIn.vue';
import SignUp from './views/SignUp.vue';
import Dashboard from './views/Dashboard.vue';
import firebase from 'firebase';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '*',
      redirect: '/'
    },
    {
      path: '/',
      name: 'welcome',
      component: Welcome,
    },
    {
      path: '/signin',
      name: 'SignIn',
      component: SignIn,
    },
    {
      path: '/signup',
      name: 'SignUp',
      component: SignUp,
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
    },
  ],
});

router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if(requiresAuth && !currentUser) next('login');
  else if (!requiresAuth && currentUser) next('home');
  else next();
})

export default router;

obiekt

Invalid object vue-router.esm.js:1924
    abort vue-router.esm.js:1924
    iterator vue-router.esm.js:1987
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
    <anonymous> router.js:55
    iterator vue-router.esm.js:1962
    step vue-router.esm.js:1736
    runQueue vue-router.esm.js:1744
    confirmTransition vue-router.esm.js:1991
    transitionTo vue-router.esm.js:1893
    push vue-router.esm.js:2294
    iterator vue-router.esm.js:1979
0

A jak zakomentujesz tą sekcję z About? A potem zakomentuj tą sekcję z gwiazdką na początku. Ogólnie polecam taki debug robić jak coś nie działa, albo sprawdzać aplikację za każdym razem jak wprowadzasz zmiany - wtedy dokładnie wiesz który fragment ją popsuł.

0

@Markuz: Niestety nic nie pomogło:

import Vue from 'vue';
import Router from 'vue-router';
import Welcome from './views/Welcome.vue';
import SignIn from './views/SignIn.vue';
import SignUp from './views/SignUp.vue';
import Dashboard from './views/Dashboard.vue';
import firebase from 'firebase';

Vue.use(Router);

const router = new Router({
  routes: [
    // {
    //   path: '*',
    //   redirect: '/'
    // },
    {
      path: '/',
      name: 'welcome',
      component: Welcome,
    },
    {
      path: '/signin',
      name: 'SignIn',
      component: SignIn,
    },
    {
      path: '/signup',
      name: 'SignUp',
      component: SignUp,
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      meta: {
        requiresAuth: true
      }
    },
    // {
    //   path: '/about',
    //   name: 'about',
    //   // route level code-splitting
    //   // this generates a separate chunk (about.[hash].js) for this route
    //   // which is lazy-loaded when the route is visited.
    //   component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
    // },
  ],
});

router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if(requiresAuth && !currentUser) next('login');
  else if (!requiresAuth && currentUser) next('home');
  else next();
})

export default router;

1

Wyłapałem błąd, otóż else if (!requiresAuth && currentUser) next('home'); kierował do home a home nie istnieje więc po zmanie na dashboard działa, dziękuje za pomoc. Jednak trzeba było błędu szukać w routes

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.