function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ 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:icon iconName="standard:scan_card" alternativeText="My Expenses"/>
            <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>
        <!-- / PAGE HEADER -->
        <!-- LIST DOCUMILL DOCS -->
            <lightning:layoutItem padding="around-small" size="6">
                <aura:iteration var="doc" items="{!v.listDocuments}" >
        <!-- / LIST DOCUMILL DOCS  -->


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>

        $Lightning.use("c:DocumillApp", function() {
                    function(cmp) {
                        console.log('>>>>> App is hosted');

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
component.set('v.listDocuments',response.getReturnValue()); // setting the value in attribute


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?

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.