Vue.js app with Firebase realtime database and VueFire suddenly stopped working

Question

I have not changed my code whatsoever, but last week VueFire stopped loading any data. I have tried reverting to older versions of the Vue and VueFire but I can't seem to find what has caused the issue.

At the moment my code is nearly identical to documentation available here: https://vuefire.vuejs.org/vuefire/#why

    // Vue.js
    let config = {
        apiKey: "<?php echo getenv('FB_API_KEY'); ?>",
        authDomain: "<?php echo getenv('FB_AUTH_DOMAIN'); ?>",
        databaseURL: "<?php echo getenv('FB_DB_URL'); ?>",
        projectId: "esportsgametrainers",
        storageBucket: "<?php echo getenv('FB_STORAGE_BUCKET'); ?>",
        messagingSenderId: "<?php echo getenv('FB_MSG_SENDER_ID'); ?>"
    };

    let app = firebase.initializeApp(config);
    let db = app.database();

    // Open Session Ref.
    let openSessionsRef = db.ref('openSessions');

    let vm = new Vue({
        el: '#open_training_sessions',
        data: () => ({ openSessions: [] }),
        firebase: {
            openSessions: openSessionsRef
        },
        computed: {
            latestOpenSessions: function () {
                console.log('??', this.openSessions);
                //return this.openSessions;
                return this.openSessions.filter(function (session) {
                    console.log(session);
                    return session;
                    // Only unaccepted games
                    if (!session.accepted) {
                        // Date filter
                        let currentTime = new Date().getTime();
                        let sessionCreated = new Date(session.CreatedDate).getTime();
                        if (sessionCreated < currentTime) {
                            let offset = currentTime - sessionCreated;
                            if (offset / 3600000 < 3) {
                                return session;
                            }
                        } else {
                            return session;
                        }
                    }
                });
            }
        }
    });

After adding the line: data: () => ({ openSessions: [] }), the app is no longer throwing errors, however the contents of the array are always empty, while the Firebase DB I am loading has many entries.

It's really frustrating that this has happened. As I said, I did not change the code, it worked for several months and now it does not.

Does anyone know why this is happening?

Answer 1

I have finally discovered the source of this issue and how to fix.

Some of the confusion was caused by the fact that, since my app is still in early development it was actually loading Vuefire from CDN rather than from a local dependency.

Recently Vuefire devs have changed from 1.x to 2.x as their official stable release. That said, it would seem that in 2.x (now the stable channel) and 3.x (next pre-release candidate) releases, with the main focus shifting to Cloudstore, there are now major problems with Realtime Database implementations.

After downgrading Vuefire to version 1.4.5 (latest 1.x release) all of my original source code is once again working as expected.