Component Initilization Error: cannot read property 'g'

Question

Everything was working fine with this component a couple days ago. Then I added an event and now I'm getting a strange error:

Uncaught Component class instance initialization error [Cannot read property 'g' of undefined] Callback failed: serviceComponent://ui.flexipage.components.page.FlexipageControllerV2/ACTION$getPage

function: a.H.wd

Markup:

<aura:component implements="flexipage:availableForAllPageTypes" controller="QuestionViewerController" >

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

<aura:attribute name="title" type="String" required="true" default="Question Viewer"/>
<aura:attribute name="Questions" type="Question__c[]"/>
<aura:attribute name="currentQuestion" type="Question__c"/>
<aura:attribute name="index" type="Integer" />
<aura:attribute name="bodyEmpty" type="Boolean"/>

<lightning:card title="{!'Question: ' + v.currentQuestion.Name}" class="slds-p-horizontal_medium">
    <div class="slds-grid--verticle">
        <div class="slds-col slds-no-flex">

            <aura:if isTrue="{! v.bodyEmpty }">
                    <lightning:formattedText class="slds-text-heading_medium slds-no-flex" title="{!v.currentQuestion.Name}" value="{!v.currentQuestion.Explanation__c}"/>
                <aura:set attribute="else">
                    <lightning:formattedText class="slds-text-heading_medium slds-no-flex" title="{!v.currentQuestion.Name}" value="{!v.currentQuestion.body__c}"/>    
                </aura:set>
            </aura:if> 

        </div>
        <div class="slds-p-top_medium slds-p-bottom_medium">
            <lightning:formattedText aura:id="answer" class="slds-text-heading_small slds-no-flex slds-hide slds-box" value="{! v.currentQuestion.answer__c }"/>
        </div>
        <div class="slds-col slds-no-flex slds-theme_info">
            <button class="slds-button" onclick="">
                <lightning:icon iconName="action:back" size="small" alternativeText="Do something" />
            </button>

            <button class="slds-button" onclick="">
                <lightning:icon iconName="action:delete" size="small" alternativeText="Do something" />
            </button>

            <button class="slds-button" onclick="{! c.createQuestion }">
                <lightning:icon iconName="action:flow" size="small" alternativeText="Do something" />
            </button>

            <button class="slds-button" onclick="{! c.showAnswer }">
                <lightning:icon iconName="action:new_campaign" size="small" alternativeText="Do something" />
            </button>

            <button class="slds-button" onclick="{! c.nextQuestion }">
                <lightning:icon iconName="action:refresh" size="small" alternativeText="Do something" />
            </button>

            <lightning:formattedText class="slds-p-horizontal_small" value="{! v.currentQuestion.Category__c }" />
        </div> 
    </div>
</lightning:card>

client side controller, I'm pretty sure it has to do with the init method because It says 'component initialization':

doInit : function(component, event, helper) {
    var questionlist = component.get("c.getQuestionList");
    questionlist.setCallback(this, function(response){
        var state = response.getState();

        if(state == "SUCCESS"){
            component.set("v.Questions",response.getReturnValue());
        } 

    });

    component.set("v.index",0);

    $A.enqueueAction(questionlist);
},

apex controller:

public class QuestionViewerController {

@AuraEnabled
public static List<Question__c> getQuestionList(){
    return [Select id,body__c,answer__c,Name,Type__c,Explanation__c,Category__c From Question__c];
}
}

Answer 1

Looks like your event handler declaration is causing the problem.

<aura:handler name="QuestionAddedEvent" value="{!this}" action="{! c.reloadQuestions }"/>

You should not be using value="{!this}", as this would try to handle component initialisation. I am guessing it is conflicting with you doInit handler throwing the error. There must be only one aura:valueInit event for a given component.

Reference : https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_aura_valueInit.htm

That being said , the handler "QuestionAddedEvent" does not mention which event you are handling , It must ideally take an event=""attribute to let know which event you are handling in the action.

Something like the following

<aura:handler name="QuestionAddedEvent" event="ns:compEvent" action="{!c.handleComponentEvent}"/>

This also makes sense why your component stopped working as soon as this handler was introduced.

Answer 2

Looks like the issue is with the syntax for event handler .

Closely re examine the below lines of code

<aura:handler name="QuestionAddedEvent" value="{!this}" action="{! c.reloadQuestions }"/>

Binding this function as value is applicable only for the init event .

Note that for application event the handler would have the syntax has below

<aura:handler event="c:QuestionAddedEvent" action="{!c.reloadQuestions}"/>

This assumes you have defined an application event file with name reloadQuestions

For Component event the below is the format

<aura:handler name="QuestionAddedEvent" event="c:QuestionAddedEvent"
action="{!c.reloadQuestions}"/>