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$getPagefunction: 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];
}
}
Best Answer
Looks like your event handler declaration is causing the problem.
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
This also makes sense why your component stopped working as soon as this handler was introduced.