Cannot read property 'pipe' of undefined at DashboardComponent

Question

I keep getting the following error:

ERROR TypeError: Cannot read property 'pipe' of undefined at DashboardComponent.push../src/app/dashboard/dashboard.component.ts.DashboardComponent.getReferredUsers

My code is as follows:

  ngOnInit() {
    this.ngxLoader.start();

    this.isMobile = this.breakpointObserver.observe([Breakpoints.Handset]);
    this.campaignMode = environment.campaignMode;
    this.anonymousPhotoURL = 'https://i.imgflip.com/1slnr0.jpg';
    this.user = JSON.parse(localStorage.getItem('user'));

    this.userService.getUserById(this.user.uid).subscribe(result => {
      if (result) {
        this.setUser(result);
        this.createReferralUrls();
        this.calculateNoOfUsers();
        this.calculateRanking();
        this.getReferredUsers();
        this.ngxLoader.stop();
      }
    });
  }

The error is happening here:

  getReferredUsers() {
    this.invitees$ = this.userService.getReferredUsers(this.userData.referralId).pipe(map(result => {
      return result;
    }));
  }

The method in ReferralService looks like this:

  getReferredUsers(referralId) {
    if (referralId) {
      return this.afs.collection('users', ref => ref.where('referredBy', '==', referralId).limit(3)).valueChanges();
    }
  }

How can I fix it?

Answer 1

getReferredUsers returns undefined when referralId is falsy.

Debug what is the input of getReferredUsers. If it is 0, '', false, null, undefined, etc, and these are valid cases, then you should probably return some kind of empty observable so that caller doesn't fail with undefined.