afterRender threw an error in 'c:tripList' [pubsub listeners need a "@wire(CurrentPageReference) pageRef" property]

Question

I am attempting to fire events between two lightning web components. Both js files contain the line @wire(CurrentPageReference) pageRef; in the files, yet when I attempt to load the page containing the components I am getting the error

afterRender threw an error in 'c:tripList' [pubsub listeners need a "@wire(CurrentPageReference) pageRef" property]

Why do I get this error? How can I fix it?

tripList.js

/* eslint-disable no-console */
import { LightningElement, wire, api } from 'lwc';
import getAllActiveTrips from '@salesforce/apex/IMRTripService.getAllActiveTrips';
import { CurrentPageReference } from 'lightning/navigation';
import { registerListener, unregisterAllListeners } from 'c/pubsub';
export default class TripList extends LightningElement {
  @api tripArray = [];
  @wire(CurrentPageReference) pageRef;
  //logic to pull the list of trips using apex class and assign to tripArray
  @wire(getAllActiveTrips) tripArray;
  connectedCallback(){
    registerListener('updateTripList', this.handleUpdateTripList, this);
  }
  disconnectedCallback() {
        unregisterAllListeners(this);
  }
  handleUpdateTripList(activeRegion){
    if(this.template.querySelector('article').dataset.region === activeRegion){
      console.log('asia');
    }
  }

}

tripFilter.js

/* eslint-disable no-console */
import { LightningElement, track, api, wire } from "lwc";
import { NavigationMixin, CurrentPageReference } from 'lightning/navigation';
import { fireEvent } from 'c/pubsub';
export default class TripFilter extends LightningElement {
  @wire(CurrentPageReference) pageRef;

  @track filterArray = [
    { id: "0", name: "All" },
    { id: "1", name: "Asia" },
    { id: "2", name: "Africa" },
    { id: "3", name: "Latin America / Caribbean" },
    { id: "4", name: "Mini Missions" },
    { id: "5", name: "Signature" },
    { id: "6", name: "World Heritage Site" },
    { id: "7", name: "Festival" },
    { id: "8", name: "Resort" },
    { id: "9", name: "Safari" }
  ];
  @api activeRegion = 'All';
  handleClick(event){
    switch(event.target.dataset.filter){
      case 'All': this.activeRegion = 'All';
      console.log(this.activeRegion);
      fireEvent(this.pageRef, 'updateTripList', this.activeRegion);
      break;
      case 'Asia': this.activeRegion = 'Asia';
      console.log(this.activeRegion);
      fireEvent(this.pageRef, 'updateTripList', this.activeRegion);
      break;
      case 'Africa': this.activeRegion = 'Africa';
      console.log(this.activeRegion);
      fireEvent(this.pageRef, 'updateTripList', this.activeRegion);
      break;
      case 'Latin America / Carribbean': this.activeRegion = 'Latin America / Carribbean';
      console.log(this.activeRegion);
      fireEvent(this.pageRef, 'updateTripList', this.activeRegion);
      break;
      default: console.log(event.target.dataset.filter);
    }
  }
}

Answer 1

I've encountered this problem as well. The thing is registerListener may be called before @wire(CurrentPageReference) pageRef; is finished executing and though pageRef is null as that time.

To fix that, I call registerListener within the callback of @wire(CurrentPageReference). Here:

  @wire(CurrentPageReference)
  wiredPageRef(pageRef) {
    this.pageRef = pageRef;
    if(this.pageRef) registerListener('updateTripList', this.handleUpdateTripList, this);
  }

Hope it helps you!

Answer 2

I had the same issue when calling events in sibling components in App. Added a default pageRef with attributes if its null to overcome this.

    // Registering Event
    connectedCallback() {      
        if(!this.pageRef)
        {
            this.pageRef = {};
            this.pageRef.attributes = {};
            this.pageRef.attributes.LightningApp = "LightningApp";
        }  
        registerListener('loadsectionselected', this.showContent, this);
    }


    // firing Event
    if(!this.pageRef)
    {
        this.pageRef = {};
        this.pageRef.attributes = {};
        this.pageRef.attributes.LightningApp = "LightningApp";
    }

    var recId = this.recId===null ? event.getParam('name') : this.recId;
    var recName='test';      
    fireEvent(this.pageRef, 'loadsectionselected', 
                                            { 
                                                "RecordId" : recId,
                                                "RecordLabel" : recName
                                            });