Screen Flow Error on an External Web Application

Question

I am embedding a Salesforce screen flow in my web application using Lighting Out feature. It worked for very basic screen flow with 2 screens but when I used a complex screen flow it is showing me following error:

Note --> Complex flow has multiple screen, create record action and screen with lwc component.

Screen Flow Error: This page has an error. You might just need to refresh it. Error during LWC component connect phase: [Error in $A.getCallback() [Cannot read properties of null (reading 'getReference')]] Failing descriptor: {markup://flowruntime:auraField}

I am facing above error while running web application, I can see the flow button but fields are not showing because of above error.

-- Aura Component --

<!-- auraScreenFlow.cmp -->

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <lightning:flow aura:id="flowScreen" />
</aura:component>

<!-- auraScreenFlowController.js -->

({
    init : function(component) {
        var flow = component.find("flowScreen");
        flow.startFlow("flow_api_name");
    }
})

-- Lightning Application --

<!-- auraScreenFlowApplication.app -->

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

-- Web Application HTML --

<!-- index.html -->

<div id="flow"></div>

<script src="https://myorg.lightning.force.com/lightning/lightning.out.js"></script>
<script>
    $Lightning.use('c:auraScreenFlowApplication',
            function () {
                $Lightning.createComponent(
                    'c:auraScreenFlow',
                    {},
                    "flow",
                    function (cmp) {
                        console.log('Created', { cmp });
                    }
                );
            },
            'https://myorg.lightning.force.com/',
            'access-token'
        );
</script>

I configured Lightning Out feature properly. Created a Connect App, Saved 'https://localhost:8081' in CORS setting of my Org, and my web app is running fine. But after loading Lightning App screen flow only shows button not fields that are present on screen.

I searched for solution applied some and still facing same issue.

What is the cause of this problem? How I can fix it?

Thanks.

Answer 1

Any lightning components you've added to the Flow's Screens should be added as dependencies in the lightning-out <aura:application>

There are also some constraints on what's available in a lightning-out context. I believe lightning-file-upload (including the base flow version) is not compatible, but that may have changed since I last tried.