Calling LWC Components from aura but component is not rendering

Question

Can I Please get some help to call Lwc from Aura.

Below is code reference and its fetching blank page below

Aura Component code.

Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >

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

<c:cpm_tariffApprovalDisplay aura:id="cpm_tariffApprovalDisplay" ></c:cpm_tariffApprovalDisplay>
</aura:component>

JS

({ doInit : function(component, event, helper) {

 component.find('cpm_tariffApprovalDisplay').getTarriffData();
    component.find('cpm_tariffApprovalDisplay').getQuoteLineItemFieldsforTemp();
    component.find('cpm_tariffApprovalDisplay').getProposalDetailsFields();
    component.find('cpm_tariffApprovalDisplay').handleSetActiveSectionC();
        
    
}

})

Note - getTarriffData, getQuoteLineItemFieldsforTemp,getProposalDetailsFields, handleSetActiveSectionC these are the methods decorated with API in lwc code.

Answer 1

The actual issue could be on the naming convention <c:cpm_tariffApprovalDisplay aura:id="cpm_tariffApprovalDisplay" ></c:cpm_tariffApprovalDisplay>.

Generally underscores are potentially recommended for the naming conventions. But it's up to the developers choice. Here on this case, I recommend you to please check the kebab case naming convention while calling the LWC component. For Example : It should be something like <c:cpm-tariff-approval-display aura:id="cpm_tariffApprovalDisplay" > </c:cpm-tariff-approval-display >