Getting error - This page has an error. You might just need to refresh it. Action failed: c:SearchBar$controller$searchKeyChange

Question

I am getting the following error -

This page has an error. You might just need to refresh it. Action failed: c:SearchBar$controller$searchKeyChange [Cannot read properties of undefined (reading 'setParams')] Failing descriptor: {c:SearchBar$controller$searchKeyChange}

code for your reference -

QuickContcts.app

<aura:application>
        <link href='/resource/bootstrap' rel="stylesheet"/>
        <div class="navbar navbar-default navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a href="#" class="navbar-brand">Lightning Contacts</a>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <c:SearchBar/>
                    <c:ContactList/>
                </div>
                <div class="col-sm-8">
                    <c:ContactDetails/>
                </div>
            </div>
        </div>
    </aura:application>

ContactList.cmp
<aura:component controller="ContactController">
        <aura:attribute name="contacts" type="Contact[]"/>
        <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
        <aura:handler event="c:SearchKeyChange" action="{!c.searchKeyChange}"/>
        <ul class="list-group">
            <aura:iteration items="{!v.contacts}" var="contact">
                <li class="list-group-item">
                    <a href="{! '#contact/' + contact.Id }">
                        <p>{!contact.Name}</p>
                        <p>{!contact.Phone}</p>
                    </a>
                </li>
            </aura:iteration>
        </ul>
    </aura:component>

ContactListController.js

({
        doInit : function(component, event) {
            var action = component.get("c.findAll");
            action.setCallback(this, function(a) {
                component.set("v.contacts", a.getReturnValue());
            });
            $A.enqueueAction(action);
        },
    searchKeyChange: function(component, event) {
        var searchKey = event.getParam("searchKey");
        var action = component.get("c.findByName");
        action.setParams({
          "searchKey": searchKey
        });
        action.setCallback(this, function(a) {
            component.set("v.contacts", a.getReturnValue());
        });
        $A.enqueueAction(action);
    }
    })

SearchKeyChange.evt

<aura:event type="APPLICATION">
        <aura:attribute name="searchKey" type="String"/>
    </aura:event>

SearchBar.cmp

<aura:component>
        <input type="text" class="form-control" onkeyup="{!c.searchKeyChange}"
                placeholder="Search"/>
    </aura:component>

SearchBarController.js

({
        searchKeyChange: function(component, event, helper) {
            var myEvent = $A.get("e.SearchKeyChange");
            myEvent.setParams({"searchKey": event.target.value});
            myEvent.fire();
        }
    })

ContactDetail.cmp

<aura:component controller="ContactController">
        <aura:attribute name="contact" type="Contact" default="{'sobjectType': 'Contact'}"/>
       <aura:handler event="aura:locationChange" action="{!c.locationChange}"/>
        <div class="details">
            <h1>{!v.contact.Name}</h1>
            <h3>{!v.contact.Account.Name}</h3>
            <h3>{!v.contact.Title}</h3>
            <p>{!v.contact.Phone}</p>
            {!v.contact.MobilePhone}
        </div>
    </aura:component>

ContactDetailController.js

({
        locationChange : function(component, event, helper) {
            var token = event.getParam("token");
            if(token!=null) {
            if (token.indexOf('contact/') === 0) {
                var contactId = token.substr(token.indexOf('/') + 1);
                var action = component.get("c.findById");
                action.setParams({
                  "contactId": contactId
                });
                action.setCallback(this, function(a) {
                    component.set("v.contact", a.getReturnValue());
                });
                $A.enqueueAction(action);
            }
            }    
        }
    })

Answer 1

Adding to the other answer, you need to register the event in your SearchBar component and also update the reference in the SearchBar controller.

SearchBar.cmp

<aura:component>
    <aura:registerEvent name="appEvent" type="c:SearchKeyChange"/>

    <input type="text" class="form-control" onkeyup="{!c.searchKeyChange}"
                placeholder="Search"/>
</aura:component>

SearchBarController.js

({
    searchKeyChange: function(component, event, helper) {
        var myEvent = $A.get("e.c:SearchKeyChange");
        myEvent.setParams({"searchKey": event.target.value});
        myEvent.fire();
    }
})

Note that the Event in the controller code is pre-fixed with "e.c:" as this is a custom application event not a standard one.

Reference: Application Event Example