[Firebase / Auth] Cannot read property '$meta' of undefined

[julihermes]

Describe the bug I just install the plugin in my project, change the necessary files and run rss:serve. When I access any page I have this error.

Additional context Log in the console:

TypeError: Cannot read property '$meta' of undefined

1 anonymous
  D:\Code\js\approche\node_modules\vue-server-renderer\build.js:8437

2 anonymous
  D:\Code\js\approche\node_modules\vue-server-renderer\build.js:8399

3 Object.renderToString
  D:\Code\js\approche\node_modules\vue-server-renderer\build.js:8575

4 Renderer.render
  D:\Code\js\approche\node_modules\@uvue\server\lib\Renderer.js:19

5 ConnectAdapter.renderMiddleware
  D:\Code\js\approche\node_modules\@uvue\server\lib\adapters\ConnectAdapter.js:57

Please indicate versions of:

node: v8.9.4
vue-cli: 3
uvue: 0.1.0-alpha
os: Windows 10
browser: Chrome

[yabab-dev]

Without some code, it's hard to help...

Can you share code of your main, where you do a new Vue ?

[julihermes]

ok, this is my main:

import Vue from 'vue'
import VueMeta from 'vue-meta'
import firebase from 'firebase/app'
import 'firebase/auth'

import App from '@/App'
import createRouter from '@/router'
import createStore from '@/store'
import '@/filters/dateFormat'
import '@/registerServiceWorker'

import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
import ErrorAlert from '@/components/Alerts/Error'
import SuccessAlert from '@/components/Alerts/Success'
import Loading from '@/components/Dom/Loading'

import '@/assets/scss/app.scss'
import '@/assets/js/app'

Vue.use(VueMeta)

Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.component('font-awesome-layers', FontAwesomeLayers)
Vue.component('error-alert', ErrorAlert)
Vue.component('success-alert', SuccessAlert)
Vue.component('loading', Loading)

let application

Vue.config.productionTip = process.env.NODE_ENV === 'production'

firebase.initializeApp({
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID
})

export default () => {
  firebase.auth().onAuthStateChanged(
    (user) => {
      if (!application) {
        const store = createStore()
        const router = createRouter()

        application = new Vue({
          router,
          store,
          render: h => h(App),
          beforeCreate () {
            if (user) {
              this.$store.dispatch('auth/autoSignIn', user)
            }
          }
        })

        return application
      } else {
        return application
      }
    }
  )
}

[yabab-dev]

Actually you can't have an async for the new Vue()

The default exported function need to return directly the main Vue instance:

export default () => {
  const app = new Vue(...)
  return app
}

I'm not a firebase expert, what does onAuthStateChanged ?

[julihermes]

onAuthStateChanged is to verify if have a logged user, the way how I implement assure me a instance of firebase logged user before any component load.

I will try return the main Vue instance directly.

[yabab-dev]

Maybe a track for you:

Just make a UVue plugin in src/plugins/firebase.js:

export default {
  beforeStart({ store }) {
    return new Promise(resolve => {
      firebase.auth().onAuthStateChanged(user => {
        if (user) store.dispatch('auth/autoSignIn', user)
        resolve()
      })
    })
  }
}

And setup this plugin in uvue.config.js:

export default {
  plugins: ['@/plugins/firebase']
}

This way app start process will wait your callback.

[julihermes]

Oh thanks, I will try later and tell you if works.

[julihermes]

This fix the related issue, but not resolve my problem. I can use this plugin only to management my meta infos? Because I already have a consolidated SPA PWA app, implement SSR is being very difficult.

[yabab-dev]

This plugin helps you to have server side rendered pages with meta infos indeed but content of your pages will be crawlable by search engines. If you have any question, join us on Discord: https://discordapp.com/invite/3ZZBmFs

If related issue is resolve I close it :)