Lightning web component inside Visualforce page

Question

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" />
</aura:application>

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

<apex:page>
    <apex:includeLightning/>
    <div id="container"></div>

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

</apex:page>

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?

Answer 1

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