@firebase/database: FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property 'myID' of undefined

Version info

Angular: ^5.2.0

Firebase: ^4.13.1

AngularFire: ^5.0.0-rc.6.0

Other (e.g. Node, browser, operating system) (if applicable): Firebase Hosting

Test case

getLocations(radius: number, coords: Array<number>) {
        this.geoFire.query({
            center: coords,
            radius: radius
        })
        .on('key_entered', (userKey, location, distance) => {
            
            const existAlready = this.hits.value.filter(h=>h.userKey === userKey)

            if(existAlready.length > 0){
                return
            }

            const u = this.userList.query.ref
                          .child(`/${userKey}`)
                          .on('value',s=>{
                            const {name, address} = s.val()
                            console.log(s.val())
                            let hit = {
                                location,
                                distance,
                                name,
                                address,
                                userKey
                            }
                            
                            let currentHits = this.hits.value
                            currentHits.push(hit)
                            this.hits.next(currentHits)
                            
                            this.eventService.sendMessage(Constants.EVENT_MESSAGES.LOADING, true)

                          })
        })
    }

Basically what i am doing is fetching the current location and passing it to the function above

Steps to reproduce

I am using angularfire with geofire for a location based app for fetching locations around my user. It works perfectly on my dev machine, but as soon as i build and deploy to firebase hosting, I get a very strange error

@firebase/database: FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property ‘myID’ of undefined

What i am doing basically is fetching the current location and passing it to the function above, the function is meant to fetch nearby locations and then put them in a behavioursubject. It works well in development like a said, but its a big NO NO on the firebase hosting server.

Expected behavior

I expect to get back the locations around me saved in firebase.

Actual behavior

I am getting an error as stated above.

[mubashshirul]

I have solved this issue. Just do this in your app.component.ts

constructor() {
    localStorage.removeItem('firebase:previous_websocket_failure');
}

This is a temporary solution, on network fluctuation it will throw same error

[safarmer]

I ran into this issue today and it seemed to be related to having a logged in Firebase auth state. I pushed the same code to two different Firebase hosting projects and it worked on one and not the other. The site that worked was logged out. Once I clear cookies etc for the broken site and logged in again it started working.