Flow Screen Lightning Components with Flow Navigation Actions throwing exception

Question

I've created a flow screen component that allows the user to pass in an apex defined type with button labels and actions to perform the standard flow navigation actions. When adding the same component to 2 screens in a row, I get the following exception upon testing, and it kills the flow before the next screen is reached.

Uncaught (in promise) Error: Error: An internal server error has occurred
Error ID: 849784987-3000851 (-443542660)
    at Object.handleNavigationError (/components/flowruntime/flowRuntimeV2.js:19)
    at eval (/components/flowruntime/flowRuntimeV2.js:3)
    at eval (/components/flowruntime/runtimeLib.js:2)

Markup

<aura:component implements="lightning:availableForFlowScreens" access="global">

    <!-- Input variable -->
    <aura:attribute name="buttons" type="FlowNavigationButton[]" access="global"/>

    <!-- Dynamically display buttons based on Flow settings -->
    <aura:attribute name="canPause" type="Boolean" />
    <aura:attribute name="canBack" type="Boolean" />
    <aura:attribute name="canNext" type="Boolean" />
    <aura:attribute name="canFinish" type="Boolean" />

    <!-- Component Initialized Handler -->
   <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <!-- Render buttons in group-->
    <div class="slds-m-bottom_x-small">
        <lightning:buttonGroup>
            <aura:iteration items="{!v.buttons}" var="button">
                <aura:if isTrue="{!or(and(equals(button.action,'FINISH'),v.canFinish), and(equals(button.action,'NEXT'),v.canNext), and(equals(button.action,'BACK'),v.canBack), and(equals(button.action,'PAUSE'),v.canPause))}">
                    <div onclick="{!c.fireAction}" data-action="{!button.action}">
                        <lightning:button label="{!button.label}"/>
                    </div>
                </aura:if>
            </aura:iteration>
        </lightning:buttonGroup>
    </div>

</aura:component>

Controller

({
    init : function(component, event, helper) {
        //Valid actions for the user to input
        var availableActions = component.get('v.availableActions');
        // Figure out which buttons to display
        for (var i = 0; i < availableActions.length; i++) {
            console.log(availableActions[i]);
            if (availableActions[i] == "PAUSE") {
            component.set("v.canPause", true);
            } else if (availableActions[i] == "BACK") {
            component.set("v.canBack", true);
            } else if (availableActions[i] == "NEXT") {
            component.set("v.canNext", true);
            } else if (availableActions[i] == "FINISH") {
            component.set("v.canFinish", true);
            }
        }
    },

    //Fires action assocaited with button
    fireAction : function(component, event, helper) {
        var action = event.target.dataset.action;
        var navigate = component.get("v.navigateFlow");
        navigate(action);
    }
})

Answer 1

I had this same error when the flow executed called another subflow that received parameters of type Apex-Defined. To solve it, I decided to pass a String parameter to this Subflow and, with the aid of an apex class, deserialize the data, thus avoiding passing Apex-Defined variables to Subflows.