addAuthTokenListener is not a function when accessing firebase from my vue app

Question

I present issues on every vue component page that tried to access data from firebase. It only occurs when fetching or adding data to firebase. I have tried using firebase.default before every function and error still exists but goes away every time I reload page in development but not in production. I have tried downgrading firebase to 8.6.5 and 8.2.0 from my current 8.6.7 and deleting the node modules folder every time but error still exists.

main.js

    import Vue from 'vue';
import App from './App.vue';
import firebase from 'firebase/app';
import 'firebase/auth'
import router from './router';
import store from './store/index';
import vuetify from './plugins/vuetify';
import ErrorAlert from "@/components/ErrorAlert";

Vue.config.productionTip = false;
Vue.component('app-alert', ErrorAlert)
let app;

const firebaseConfig = {
    apiKey: "********",
    authDomain: "********",
    databaseURL: "********",
    projectId: "********",
    storageBucket: "********",
    messagingSenderId: "********",
    appId: "********",
    measurementId: "********"
};

firebase.initializeApp(firebaseConfig);

firebase.auth().onAuthStateChanged(user => {
    store.dispatch('auth/fetchUser', user).then();
    if (!app) {
        new Vue({
            store,
            router,
            vuetify,
            render: h => h(App)
        }).$mount('#app');
    }
});

router/index.js

  import Vue from 'vue';
import VueRouter from 'vue-router';
import firebase from 'firebase/app';
import 'firebase/auth'
import Login from '../views/Login';
import Dashboard from '../views/admin/Dashboard';
import AddFurniture from "../views/admin/AddFurniture";
import DeleteFurniture from "../views/admin/DeleteFurniture";
import SignUp from "@/views/SignUp";

Vue.use(VueRouter)

const routes = [
    {
        // Login Page
        path: '/',
        name: '/',
        component: Login
    },
    {
        // Login Page
        path: '/signup',
        component: SignUp
    },
    {
        path: '/admin',
        component: () => import('../views/admin/AdminHome.vue'),
        children: [
            {path: '', component: Dashboard},
            {path: 'add-furniture', component: AddFurniture},
            {path: 'delete-furniture', component: DeleteFurniture},
        ],
        meta: {
            requiresAuth: true,
            title: "Furniture Catalog",
            icon: "/logo.png"
        }
    }
]

const router = new VueRouter({
    mode: 'history',
    routes
});

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (!(firebase.auth().currentUser)) {
            next({name: '/'});
        } else {
            next();
        }
    } else if (to.path == '/') {
        if (firebase.auth().currentUser) {
            next({path: '/admin'});
        } else {
            next();
        }
    } else {
        next();
    }
});

export default router

Console Error:

Answer 1

Issue was fixed with latest firebase release 8.6.8. Just update your firebase npm on package.json