+ Start a Discussion

How to make Lightning Component events work in Lightning Out


I wanted to make event work in Lightning out when Lightning component is embedded into a Visualforce page. When I include <aura:dependency resource="markup://force:*" type="Event"/> in the Lightning dependency app I get the following error

An internal server error has occurred
Error ID: 268240336-7606 (1856451655)

org.auraframework.throwable.quickfix.InvalidDefinitionException: No enum constant org.auraframework.def.DefDescriptor.DefType.Event
at .(0AdA00000004Q0n:3)
at .(0AdA00000004Q0n:3)
at org.auraframework.impl.root.DependencyDefImpl.<init>(DependencyDefImpl.java:55)
at org.auraframework.impl.root.DependencyDefImpl$Builder.build(DependencyDefImpl.java:151)
at org.auraframework.impl.root.parser.handler.DependencyDefHandler.createDefinition(DependencyDefHandler.java:93)....

Following is the code I am using for the dependency app 

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="ui:button"/>
    <aura:dependency resource="markup://force:*" type="EVENT"/>

Following is the Visualforce page code 

<apex:page >
    <apex:includeLightning />

    <div id="lightning" />

       $Lightning.use("c:lcvTest", function() {
          { headingLabel : "Press Me!" , headingText : "Press Me!" },
          function(cmp) {

help would be appreciated 

Pramodh KumarPramodh Kumar
Hi DaAy,

Inorder to work event in lightning out, you have handle those methods, In my example I am handling the force:navigateToSObject,

Even if you are in Lightning and opening the vfpage, it acts like classic so you have to handle those methods by eventservice handler

Here is the small example for the Please take a look

    var recordId = '{!Account.Id}';
    var myUserContext = "{!$User.UITheme}";
    $Lightning.use("c:orgSuspendLightningOut", function () {
        $Lightning.createComponent("c:orgSuspendLightningCmp", {
                recordId: recordId,
                suspensionType : 'orgSuspension'
            function (cmp) {
                    event: 'force:navigateToSObject',
                    handler: function (event) {
                        if (myUserContext == 'Theme4t' || myUserContext == 'Theme4d') {
                            // The Visualforce page is in S1 or Lightning Experience
                        } else if (myUserContext == 'Theme3') {
                            // The Visualforce page is  running in Classic
                            window.parent.location = '/' + event.getParams().recordId;
                        } else {
                            console.log("Unsupported theme");

Let me know if you have any questions