LWC navigation error: "this[f.NavigationMixin.Navigate] is not a function"

Question

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

Answer 1

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 :)