quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.9k stars 3.51k forks source link

[v1.0] Firebase fails to Init (at boot) #3365

Closed CelticParser closed 5 years ago

CelticParser commented 5 years ago
Operating System - Windows_NT(10.0.17134) - win32/x64
NodeJs - 8.11.1

Global packages
  NPM - 6.5.0
  yarn - 1.13.0
  @quasar/cli - 1.0.0-beta.2
  cordova - 8.0.0

Important local packages
  quasar - 1.0.0-beta.4 -- High performance, Material Design 2, full front end stack with Vue.js -- build SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase  @quasar/app - 1.0.0-beta.8 -- Quasar Framework App CLI
  @quasar/extras - 1.1.0 -- Quasar Framework fonts, icons and animations
  vue - 2.6.7 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.0.2 -- Official router for Vue.js 2
  vuex - 3.1.0 -- state management for Vue.js
  electron - 3.0.8 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - 12.2.0 -- Customize and package your Electron app with OS-specific bundles (.app, .exe, etc.) via JS or CLI
  electron-builder - Not installed
  @babel/core - 7.0.0-beta.54 -- Babel compiler core.
  webpack - 4.25.1 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7,
css, less, ... and your custom stuff.  webpack-dev-server - 3.1.14 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 3.6.3 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  register-service-worker - 1.5.2 -- Script for registering service worker, with hooks
Quasar App Extensions
  *None installed*

JsFiddle

Related to src/boot. I don't this I can implement a before the root Vue instance instantiation on JsFiddle

What did you get as the error?

Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)

Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (:2:14)

What were you expecting?

Firebase to Initialize: I stepped thru the upgrade process via Quasar Team Upgrade Notes.md over an existing project. Prior to doing so, I C&P'd the project to a new directory and started a new vsCode instance. Before the app entrypoint, Firebase and FirebaseUI dependencies are utilized. The vsCode instances running ( side-by-side ); v0.17 runs as expected; v1.0.0-beta4 throws the above exception error: ...properties may not be accessed on strict mode functions... The only changes between the instances related is the renaming of the src/plugins dir to src/boot and the export function in the quasar.conf.js to reflect the directory change.

What steps did you take, to get the error?

Upgrade from v0.17 to ^v1.0 (See above section).

Attempts to remove the error:

  1. Stripped down the boot file in question - firebase.js
  2. Removed all other boot inits from the config file
  3. Jumped on Discord and troubleshooted with @AllanGaunt(EN-GB)
  4. Verified Firebase versions between the two instances
  5. Upgraded Firebase from v5.8.3 to v5.8.4 in the Quasar v1 instance

Below is the boot file and a snippet from config.

module.exports = function (ctx) {
  return {
    // app boot plugins (/src/boot)
    boot: [
      // 'apexcharts',
      'firebase',
      // 'i18n',
      // 'svgicon',
      // 'vshowslide',
      // 'vueoffline',
    ],
. . .

The boot file, firestore.js:

import firebase from 'firebase/app'
import 'firebase/auth'
import firebaseui from 'firebaseui'

import Store from '@store'

// TODO: [Security] [PRODUCTIVITY] Set up dotenv with prod and dev keys.
// SEE: https://medium.com/carbono/using-env-file-in-quasar-apps-72b56909302f
const config = {
  apiKey           : process.env.FIREBASE_API_KEY,
  authDomain       : process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL      : process.env.FIREBASE_DATABASE_URL,
  projectId        : process.env.FIREBASE_PROJECT_ID,
  storageBucket    : process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSASING_SENDER_ID
}
/* eslint-disable */
firebase.initializeApp(config)

export const uiConfig = {
  signInSuccessUrl : '/app',
  signInFlow       : 'popup',

  callbacks: {
    signInSuccessWithAuthResult(authResult) {
      const newUser   = authResult.user
      const userItems = {
        avatar   : newUser.photoURL,
        eMail    : newUser.email,
        userName : newUser.displayName,
        userUid  : newUser.uid,
      }

      const id = userItems.userUid
      Store.dispatch('registerUser/set', { id, userItems })

      return false;
    },
  },

  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    {
      provider           : firebase.auth.EmailAuthProvider.PROVIDER_ID,
      requireDisplayName : true,
    },
    // TODO [UX] Handle anonymous user upgrade and merge conflicts
    // SEE: https://github.com/firebase/firebaseui-web#handling-anonymous-user-upgrade-merge-conflicts
    firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID,
  ],

  tosUrl: '/tos',
  privacyPolicyUrl() {
    window.location.assign('/pp');
  },
};

export default ({ router, Vue }) => {
  // Vue.use(firebase)
  Vue.prototype.$firebase = firebase

  firebase.auth().onAuthStateChanged((user) => {
    if (!user) {
      router.replace('/');
    } else {
      // TODO: [UX] Route to user's intended page
      router.replace('/app/operations/dashboard')
    }
  });

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

    firebase.auth().onAuthStateChanged((user) => {
      if (requiresAuth && !user) {
        // TODO: [UX] Wire it up!
        // const loginpath = window.location.pathname;
        // next({ name: 'Dashboard', query: { from: loginpath } })
        next('/')
      } else {
        next()
      }
    });
  })
}

Application Entry Point, login.vue:

<script>
import firebaseui from 'firebaseui'
import { uiConfig } from '@boot/firebase'
. . .

export default {
  name   : 'Login',
  parent : 'LoginLayout',
. . .
  mounted () {
    if (firebaseui.auth.AuthUI.getInstance()) {
      const ui = firebaseui.auth.AuthUI.getInstance()
      ui.start('#firebaseui-auth-container', uiConfig)
    } else {
      const ui = new firebaseui.auth.AuthUI(this.$firebase.auth())
      ui.start('#firebaseui-auth-container', uiConfig)
    }
  },
. . .
</script>
<template>
. . .
    <div id="firebaseui-auth-container" />
. . .
</template>
pdanpdan commented 5 years ago

In conf you have firebase as plugin name but the file in bout is firestore.js?

CelticParser commented 5 years ago

just a typo above.

However, I just now discovered it's a Vuex plugin - vuex-easy-firestore.