0

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);
    }
  }
}
2

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!

0

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
                                            });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.