1

When attempting to use the Lightning navigation service in my component's base class (.js), I receive the following hard error when functionally testing in the UI:

this[f.NavigationMixin.Navigate] is not a function

I am calling the NavigationMixin function provided by the lightning/navigation module.

I have imported the module:

import { NavigationMixin } from 'lightning/navigation';

And am calling the function as below:

this[NavigationMixin.Navigate]({
    type: 'standard__recordPage',
    attributes: {
        recordId: this.org.Id,
        objectApiName: 'Account',
        actionName: 'view'
    }
});
  • This is embarrassing, but I'm going to tell you what I did. I did not capitalize the N in NavigationMixin on the import. Hopefully this saves 5 more minutes of searching you still have issues after getting your default class export right. – sfsf610 May 1 at 21:48
8

Apply the NavigationMixin function to your component’s base class:

export default class MyLwcComponent extends NavigationMixin(LightningElement) {

Hopefully this saves 3 mins of searching for those who only skimmed the documentation before diving in :)

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.