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);
}
}
Best Answer
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.