+ Start a Discussion
Stefaan Somers 12Stefaan Somers 12 

How to integrate Lightning component within Visualforce Page

Here is the source-code of my component :
<!--
 - Created by stefaans on 29/04/2019.
 -->

<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 DOCUMILL 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 DOCUMILL DOCS  -->


</aura:component>

Here is the code of my VFPage : 
<!--
 - Created by stefaans on 29/04/2019.
 -->

<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
/**
* Created by stefaans on 30/04/2019.
*/
({
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) 


 
Kaustubh LabheKaustubh Labhe
Hi Stefaan,

Is this basically how you're doing it?
https://www.jitendrazaa.com/blog/salesforce/use-lightning-component-in-visualforce-page/

Thx
Stefaan Somers 12Stefaan Somers 12
Yes, only I use an init event in the component, and it’s this one wchich is causing the problem.