LWC Navigation Mixin navigating successfully but throwing error first ([NavigationMixin.Navigate] is undefined)

Question

I'm having an odd problem with an LWC. I'm using the Navigation Mixin to navigate to a newly-created record, and once the record is successfully created, the page briefly displays an error before navigating to new record page. Not a huge issue, but a bad UX. The error I'm getting in the console is TypeError: "this[d.NavigationMixin.Navigate](...) is undefined".

I'm wondering if there's an issue with the promise that I don't understand, or if I need to add some type of delay prior to navigation. Any input would be greatly appreciated!

Here's the simplified JS:

import { LightningElement, api, track, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
// apex methods imported here

export default class Cc_CreateInvoice extends NavigationMixin(LightningElement) {
    @api recordId;
    // @track variables here
    // unrelated methods

    createInvoice() {
        // doing some stuff

        // server-side call to create the invoice from the selected tasks
            createInvoiceApex({ inputIdListString: taskListJson,
                                invoiceDate: this.cutoffDate,
                                recordTypeMetadataString: JSON.stringify(this.recordTypeMap.get(this.recordType)),
                                projectId: this.recordId })
                .then(recId => {
                    if(recId) {
                        // if successful, navigate to new invoice record
                        this.navToRecordView(recId);
                    } else {
                        this.showErrorMessage(
                            'Unable to create invoice record from the selected tasks.\nNo invoice returned.',
                            'error creating invoice record',
                            null);
                    }
                })
                .catch(error => {
// ******* THIS IS WHERE THE ERROR IS THROWN *******
                    this.showErrorMessage(
                        'Unable to create invoice record from the selected tasks.\n' + JSON.stringify(error), 
                        'error creating invoice record',
                        error);
                })
        }
    }



    navToRecordView(recId) {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: recId,
                objectApiName: 'Invoice__c',
                actionName: 'view'
            },
        })
        .catch(error => {
            this.showErrorMessage(
                'Unable to navigate to record with ID ' + recId,
                'Error navigating to record ' + recId + '.',
                error);
        });
    }


    showErrorMessage(errorMsg, errorDesc, error) {
        this.isError = true;
        this.errorMsg = errorMsg;
        if(errorDesc) console.log(errorDesc);
        if(error) console.log(error);
    }
}

Answer 1

The issue is the catch function called after this[NavigationMixin.Navigate] as the NavigationMixin's Navigate API does not return a promise.

Try removing the catch.

After testing different ways to break the navigation method, I found that the library appears to handle bad requests quite well so it might not be necessary to handle it in your module.

E.g.

this[NavigationMixin.Navigate]({
    type: 'standard__recordPage',
    attributes: {
        recordId: 12345678,
        actionName: 'view'
    },
})