function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Stefaan Somers 11Stefaan Somers 11 

Error when calling aura-component within Visualforce Page

I have an aura-component defined with a doInit event. 
<aura:component description="DocumillDocuments"implements="forceCommunity:availableForAllPageTypes" access="global"controller="DocumillHelper">
    <aura:attribute name="objectType" type="String"/>
    <aura:attribute name="listDocuments" type="Documill_Template__mdt[]"/>
 
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
        <!-- PAGE HEADER -->
        <lightning:layout class="slds-page-header slds-page-header--object-home">
            <lightning:layoutItem>
                <lightning:icon iconName="standard:scan_card" alternativeText="My Expenses"/>
            </lightning:layoutItem>
            <lightning:layoutItem padding="horizontal-small">
                <div class="page-section page-header">
                    <h1 class="slds-text-heading--label">Documill</h1>
                    <h2 class="slds-text-heading--medium">Documents</h2>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
        <!-- / PAGE HEADER -->
        <!-- LIST DOCS -->
        <lightning:layout>
            <lightning:layoutItem padding="around-small" size="6">
                <aura:iteration var="doc" items="{!v.listDocuments}" >
                    <p>{!doc.name}</p>
                </aura:iteration>
            </lightning:layoutItem>
        </lightning:layout>
        <!-- / LIST DOCS  -->
 
</aura:component>
Here is the code of my Visualforce page  
<apex:page id="DocumillDocuments" sidebar="false" showHeader="false"standardStylesheets="false">
    <apex:includeLightning />
    <div id="DocumillDocumentsDiv"></div>
    <script>

        $Lightning.use("c:DocumillApp", function() {
            $Lightning.createComponent("c:DocumillDocuments",
                    {},
                    "DocumillDocumentsDiv",
                    function(cmp) {
                        console.log('>>>>> App is hosted');
                    });
        });
    </script>
</apex:page>

As soon as the line hereunder is included within the component, I get this error.
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

If I remove this line, the component shows correctly in the Visualforce page.

In my handler I don't have any real logic yet 
({
doInit : function(component, event, helper) { // component, event, helper are parameter of doinit function
console.log('Init event is being triggered')
/* var action= component.get('c.getDocuments'); // Calling apex method
action.setCallback(this,function(response) // getting response back from apex method
{
var state=response.getState(); // getting the state
if(state==='SUCCESS')
{
component.set('v.listDocuments',response.getReturnValue()); // setting the value in attribute
}
});
$A.enqueueAction(action);*/
 
}
})

When I open the visualforce page, I get  the following error : 
aura_proddebug.js:43717 Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
    at AuraInstance.message (aura_proddebug.js:43717)
    at AuraInstance.handleError (aura_proddebug.js:43632)
    at AuraInstance.$reportError$ (aura_proddebug.js:43693)
    at reportError (aura_proddebug.js:43429) 
Best Answer chosen by Stefaan Somers 11
Deepali KulshresthaDeepali Kulshrestha
Hi Stefaan,
Greetings to you!

- I read and implement your code in my Org. You have to put a semicolon in your doInit controller.
- And call app and component correctly.
- I checked and corrected your code I am sharing DocumillApp.app,DocumillDocuments.cmp,DocumillDocumentsController.js and DocumillDocuments_Page.page files.
    
    DocumillApp.app : -
    
    <aura:application access="global" extends="ltng:outApp" implements="ltng:allowGuestAccess">
    </aura:application>
    
-------------------------------------------------------------------------------------------------------------------------------
    
    DocumillDocuments.cmp : -
    
    <aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >
        <aura:attribute name="objectType" type="String"/>
        <aura:attribute name="listDocuments" type="Object[]"/>

        <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
        <!-- PAGE HEADER -->
        <lightning:layout class="slds-page-header slds-page-header--object-home">
            <lightning:layoutItem>
                <lightning:icon iconName="standard:scan_card" alternativeText="My Expenses"/>
            </lightning:layoutItem>
            <lightning:layoutItem padding="horizontal-small">
                <div class="page-section page-header">
                    <h1 class="slds-text-heading--label">Documill</h1>
                    <h2 class="slds-text-heading--medium">Documents</h2>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
        <!-- / PAGE HEADER -->
        <!-- LIST DOCS -->
        <lightning:layout>
            <lightning:layoutItem padding="around-small" size="6">
                <aura:iteration var="doc" items="{!v.listDocuments}" >
                    <p>{!doc.name}</p>
                </aura:iteration>
            </lightning:layoutItem>
        </lightning:layout>
        <!-- / LIST DOCS  -->
    </aura:component>
    
-------------------------------------------------------------------------------------------------------------------------------
    DocumillDocumentsController.js : -
    
    ({
        doInit : function(component, event, helper) {
            console.log('Init event is being triggered');
        }
    })
-------------------------------------------------------------------------------------------------------------------------------
    DocumillDocuments_Page.page : -
    
    <apex:page sideBar="false" showHeader="false">
        <apex:includeLightning />
        <div id="Lightning"></div>
        <script>
            $Lightning.use('c:DocumillApp', function(){
                $Lightning.createComponent(
                        'c:DocumillDocuments',
                        {},
                        'Lightning',
                        function(cmp){
                            //do some stuff
                        }
                );
            });
        </script>
    </apex:page>

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha.