2

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);
    }
}
3

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'
    },
})

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.