$lightning.createcomponent callback function return before component setCallback

Question

Lightning App: NewOppLEXApp

<aura:application extends="ltng:outApp" access="GLOBAL">
    <aura:dependency resource="c:OpportunityLEX" />
</aura:application>

Lighting Component: OpportunityLEX

<aura:component controller="abc" implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForRecordHome" access="global">
<aura:attribute name="recordId" type="Id"/>
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<aura:attribute name="newRec" type="controller"/>
<lightning:notificationsLibrary aura:id="notifLib" /></aura:component>

Controller.js

({
    init : function(component, event, helper) {
        var objId = component.get("v.recordId");
        console.log(objId);
        
        var action = component.get("c.method");
        console.log(action);
        action.setParams({
            "recId" : objId
        });
        
        action.setCallback(this, function(response) {
            console.log('Setcallback');
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.newRec", response.getReturnValue());
                    var recordTypeId = component.get("v.newRec.recordType");
                    var returnURL = component.get("v.newRec.returnURL");
                    var entity = component.get("v.newRec.entity");                    
                    var createRecordEvent = $A.get('e.force:createRecord');
                    console.log(recordTypeId);
                    console.log(returnURL);
                    console.log(entity);
                    if (createRecordEvent) {
                        createRecordEvent.setParams({
                            "entityApiName" : entity,
                            "recordTypeId" : recordTypeId,
                            "defaultFieldValues" : {                           
                                "AccountId" : objId,
                            }
                        });
                        createRecordEvent.fire();
                    }
            }
        }); 
        $A.enqueueAction(action);   
    }
})

VF Page:

<apex:page standardController="Opportunity" extensions="Controller" lightningStylesheets="true"> 
    <apex:includeLightning />    
    <apex:includeScript value="/lightning/lightning.out.js" />

        <div id="divId" />
            <script>
            var accId = "{!$CurrentPage.parameters.accId}";
            console.log('accId'+accId);
            $Lightning.use("c:NewOppLEXApp", function() {
                $Lightning.createComponent("c:OpportunityLEX",
                                           { "recordId": accId},
                                           "divId",
                                           function(cmp) {
                                               console.log('Test before URL');
                                           });
            });
            </script>
</apex:page>

When I run this VF Page, e.force:createRecord fires. However I am right now seeing a blank window as "SetCallback" shows after "Test before URL", hence createrecord event doesn't pops up(what I believe). Please let me know if I am missing something in order to call createrecord event through vf page.

Answer 1

It did fire; if you saw SetCallback in the console, this means the code did execute, so the event did fire. If you need the callback to execute after the event is fired, you need to make it a delayed call, which you can do with setTimeout.

function(cmp) {
    setTimeout( () => { console.log('Test before URL') });
});

However, it's not clear that this will help you solve your problem. Please read about the X-Y Problem.