I trying to display Lightning web component inside a visualforce page.

There are three components in following hierarchy home <-- heavyMachineryForm <-- vehicleOrHeavyMachine.

Following is code for Aura Application

<aura:application extends="ltng:outApp" access="GLOBAL">
  <aura:dependency resource="lightning:button" />
  <aura:dependency resource="lightning:breadcrumbs" />
  <aura:dependency resource="lightning:breadcrumb" />
  <aura:dependency resource="lightning:layout" />
  <aura:dependency resource="lightning:layoutitem" />
  <aura:dependency resource="lightning:input" />
  <aura:dependency resource="lightning:combobox" />
  <aura:dependency resource="lightning:fileUpload" />

  <aura:dependency resource="c:home" />
  <aura:dependency resource="c:heavyMachineryForm" />
  <aura:dependency resource="c:vehicleOrHeavyMachine" />
  <aura:dependency resource="markup://force:*" type="EVENT" />

Here I have declared all the items which is being used inside components. Following is code for vf page.

    <div id="container"></div>

        $Lightning.use("c.HMVWrapperApp", function () {
            $Lightning.createComponent("c:home", {}, "container", function (cmp) {
                console.log("LWC Component was created");


I have imported following in JS file.

import { LightningElement, track, wire } from 'lwc';
import { createRecord, updateRecord, deleteRecord } from 'lightning/uiRecordApi';
import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import updateVOHMObjects from '@salesforce/apex/VOHMController.updateVOHM';

//Custom Labels import
import formHeading from '@salesforce/label/c.Heavy_Machinery_Form_Heading';
other custom labels

//Import HMV Object and fields
import HMV_FORM_OBJECT from '@salesforce/schema/HMV_Form__c';
import EXHIBITING_COMPANY_FIELD from '@salesforce/schema/HMV_Form__c.Exhibiting_Company__c'
import CONTACT_NAME_FIELD from '@salesforce/schema/HMV_Form__c.Contact_Name__c';
import EMAIL_FIELD from '@salesforce/schema/HMV_Form__c.Email__c';
import MOBILE_FIELD from '@salesforce/schema/HMV_Form__c.Mobile__c';
import MODE_OF_TRANSPORT_FIELD from '@salesforce/schema/HMV_Form__c.Mode_of_Transport__c';
import PLEASE_SELECT_ONE_FIELD from '@salesforce/schema/HMV_Form__c.Please_select_one__c';
import HMV_ID_FIELD from '@salesforce/schema/HMV_Form__c.Id';

//Import VOHM Object and fields
import VOHM_OBJECT from '@salesforce/schema/VOHM__c';
import VOHM_ID_FIELD from '@salesforce/schema/VOHM__c.Id';
import HMV_FORM_FIELD from '@salesforce/schema/VOHM__c.HMV_Form__c';
import TYPE_FIELD from '@salesforce/schema/VOHM__c.Type__c';

I have created a vf page tab, while to access vf page I am getting following error.

An internal server error has occurred
Error ID: 1932277715-245554 (-6342722)

Am I missing something?


Try changing your $Lightning.use("c.HMVWrapperApp", to $Lightning.use("c:HMVWrapperApp",

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.