Error when adding a custom lightning component with Lightning App Builder

Question

I have created a Lightning component with following codes

Component Code

<aura:component controller="stDocus" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:dependency resource="markup://force:editRecord" type="EVENT" />
    <aura:handler event="force:refreshView" action="{!c.doInit}" />
    <aura:dependency resource="markup://force:showToast" type="EVENT" />
    <aura:handler event="force:showToast" action="{!c.doInit}" />

    <aura:attribute name="recordId" type="string" />
    <aura:attribute name="docObj" type="List" />

    <div style="margin:30px auto; text-align:center; width:100%">
        <aura:iteration var="sld" items="{!v.docObj}">
            <div style="float:left; width:18%; margin:1%;">
                <img width="100%" id="theImage1" src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/512/PowerPoint_alt.png"/>
                <a href="{! '/servlet/servlet.FileDownload?file='+sld.Id}" target="_blank" id="theLink1">{!sld.Name}</a>
            </div>
        </aura:iteration>
    </div>

</aura:component>

Controller code

({
    doInit : function(component, event, helper) {
        var recordId = component.get("v.recordId");
        var action = component.get("c.getdocs");
        action.setParams({
            recordId: recordId
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var doc = response.getReturnValue();
                component.set("v.docObj", doc);
            }
        });
        $A.enqueueAction(action);
    }
})

Apex Controller code

public  class stDocus
 {
    @AuraEnabled
    //public String currentRecordId {get;set;}
    public Opportunity Oppo{get;set;}

 public List<Document> getdocs(String recordId)
 {
        Oppo = [SELECT Id, Name, StageName, Amount FROM Opportunity WHERE Id = :recordId];
        List<Document> doc = [SELECT Id, Name, FolderId, Folder.Name FROM Document WHERE Folder.Name like :Oppo.StageName];
        return doc;
 }
}

When I drag the custom Lightning component from the left side to the desired section of the Opportunity Record Page using Lightning App Builder, I get the following error as popup.

Unfortunately, there was a problem. Please try again. If the problem continues, get in touch with your administrator with the error ID shown here and any other related details. Unable to parse JSON response

I didn't get any error code. But when I inspected the console, I got the following log messages

Error in Surface: Unable to parse JSON response components/flexipageEditor/surface.js:5 Error in Surface: This page has an error. You might just need to refresh it. Action failed: flexipageEditor:component$controller$generate [$A.util.aa.ib(...) is not a function] Failing descriptor: {flexipageEditor:component$controller$generate}

Could you please help me find the issue and fix it?? I am stuck..

---

I have modified my code as per @Itai Shmida's suggestions in the comments. Now I am getting new errors.

Assertion Failed!: Unknown controller action 'getdocs' : undefined pC.log()@https://vofox-dev-ed.lightning.force.com/auraFW/javascript/YfjoKfTjN2bVGUBUXXcoWw/aura_prod.js:192:319 pC.assert()@https://vofox-dev-ed.lightning.force.com/auraFW/javascript/YfjoKfTjN2bVGUBUXXcoWw/aura_prod.js:189:393 $.A.assert()@https://vofox-dev-ed.lightning.force.com/auraFW/javascript/YfjoKfTjN2bVGUBUXXcoWw/aura_prod.js:682:279 iD.get()@https://vofox-dev-ed.lightning.force.com/auraFW/javascript/YfjoKfTjN2bVGUBUXXcoWw/aura_prod.js:299:377 b.L.get()@https://vofox-dev-ed.lightning.force.com/auraFW/javascript/YfjoKfTjN2bVGUBUXXcoWw/aura_prod.js:265:423 doInit()@https://vofox-dev-ed.lightning.force.com/auraFW/javascript/YfjoKfTjN2bVGUBUXXcoWw/aura_prod.js:147:402 H.Gc()@https://vofox-dev-ed.lightning.force.com/auraFW/javascript/YfjoKfTjN2bVGUBUXXcoWw/aura_prod.js:332:170

Please help.

Answer 1

You need to add the

@AuraEnabled

annotation to the method in your controller

@AuraEnabled
public static List<Document> getdocs(String recordId)
 {
        Oppo = [SELECT Id, Name, StageName, Amount FROM Opportunity WHERE Id = :recordId];
        List<Document> doc = [SELECT Id, Name, FolderId, Folder.Name FROM Document WHERE Folder.Name like :Oppo.StageName];
        return doc;
 }