25

When attempting to use the Lightning navigation service in my component's base class (.js), I get the following 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'
    }
});
1
  • 2
    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. May 1, 2019 at 21:48

1 Answer 1

75

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 (like me) only skimmed the documentation before diving in :)

1
  • 1
    thanks I had forgotten this part, luckily I put the error in and got your answer!!!!
    – dbwood3
    Mar 23, 2022 at 20:04

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.