I am developing a new Lightning Component with custom Event. But I am getting Following Error while loading the Page in browser Preview.

Sorry to interrupt This page has an error. You might just need to refresh it. Error during init [Cannot read property 'apply' of undefined]

I have the following code .

1) Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" > 

   <aura:registerEvent name="change" type="NBLight:valuesChange" />

    <aura:attribute name="principal" type="double" default="10"/>
    <aura:attribute name="rate" type="double" default="10"/>
    <aura:attribute name="year" type="double" default="10"/>

    <aura:attribute name="monthlyEMI" type="double" />

    <aura:handler name="change" value="{!v.principal}" action="{!calculateMonthlyPayment}" />
    <aura:handler name="change" value="{!v.rate}" action="{!calculateMonthlyPayment}" />
    <aura:handler name="change" value="{!v.year}" action="{!calculateMonthlyPayment}" />

    <aura:handler name="init" value="{!this}" action="{!NBLight.doInit}"/>   

        <ui:inputNumber label="Enter Principal " value="{!v.principal}"/>
        <ui:inputNumber label="Enter Rate of Interest " value="{!v.rate}"/>
        <ui:inputNumber label="Enter Duration in years " value="{!v.year}"/>
     <h2> Monthly Payment :: <ui:outputCurrency value="{!v.monthlyEMI}" />


2) Controller

    doInit :  function(component, event, helper) {

    calculateMonthlyPayment : function(component, event, helper) {
         alert("hello there!"); 
            console.log("Hi nitin");
          console.log("By nitin");


3) Helper

    calculateMonthlyPayment : function(component) {

        //calculate monthly emi
        var principal = component.get("v.principal");
        var year = component.get("v.year");
        var rate = component.get("v.rate");
        var monthlyEMI = principal * rate * year ;
        console.log("Nitin Items has changed");
        console.log("old value: " + evt.getParam("oldValue"));
        console.log("current value: " + evt.getParam("value"));

        // Fire the change Event 
        var event = $A.get("e.NBLight:valuesChange");
        event.setParams({"principal": principal,"year":year,"rate":rate, "monthlyEMI":monthlyEMI});

4) valueschange Event

<aura:event type="APPLICATION" description="Value change Event " >
<aura:attribute name="principal" type="double"/>
<aura:attribute name="year" type="double"/>
<aura:attribute name="rate" type="double"/>

5) Application

<aura:application >
 <h1> Welcome To Automatic Mortgage Calculate</h1>
     <NBLight:SimpleMortgageCalcComponentAutomatic />
 <h2> Thank You !!!</h2>


Please Let me know why this error is coming and how to correct it.


  • Where have you defined the event? To bind an action you have to use the following syntax: c.controllerMethodName not component.methodName OR methodName – itzmukeshy7 Apr 13 '17 at 12:04
  • I have created 1 New Lightning event named "valuesChange" . – NITIN Apr 14 '17 at 4:10
  • Can u be more specific about line no and which file u r mentioning. ? NBLight is my namespace . <aura:registerEvent name="change" type="NBLight:valuesChange" /> – NITIN Apr 14 '17 at 4:13
  • <aura:handler name="init" value="{!this}" action="{!NBLight.doInit}"/> and <aura:handler name="change" value="{!v.year}" action="{!calculateMonthlyPayment}" /> – itzmukeshy7 Apr 14 '17 at 4:16
  • @itzmukeshy7 can u plz elaborate. I am struck – NITIN Apr 14 '17 at 10:33

Your Answer

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

Browse other questions tagged or ask your own question.