Error "Sorry to interrupt. This page has an error. You might just need to refresh it" in lwc while doing rowaction in datatable

Question

i created an two lwc component in one component i am doing search for an accounts and in another component where i am getting the account list and displaying in data table.while doing row actions in data table i am getting an error

<template>
   <lightning-card  variant="Narrow"  title="Accounts List" icon-name="standard:account">
   
    <template if:true={accounts}>
        <lightning-datatable 
        data={accounts} 
        columns={cols} 
        key-field="Id"
        onrowaction={handleRowAction}
        hide-checkbox-column = "true"
        >
        </lightning-datatable>
    </template>
    <template if:true={error}>
        {error}
    </template>
    
   </lightning-card>
</template>

Apex Class:

public with sharing class searchAccountController {
    
    @AuraEnabled(cacheable=true)
    public static List<Account> searchAccounts( String searchTerm ) {
        List<Account> accounts = new List<Account>();
        if ( String.isNotBlank( searchTerm ) ) {
            List<List<SObject>> searchResults = [
                FIND :searchTerm
                RETURNING Account(
                    Id, Name, Phone, Website,Type,AnnualRevenue,Rating,
                    BillingStreet, BillingCity,Industry,
                    BillingState, BillingPostalCode
                    ORDER BY Name
                    LIMIT 10
                )
            ];
            accounts = searchResults[0];
        }
        return accounts;
    }
}

Javascript file

import { LightningElement, wire } from 'lwc';
import searchAccounts from '@salesforce/apex/searchAccountController.searchAccounts';
import {subscribe,MessageContext} from 'lightning/messageService'; 
import ACCOUNT_FILTERS from '@salesforce/messageChannel/accountFilter__c';
import { NavigationMixin } from 'lightning/navigation';

const actions = [
    { label: 'View', name: 'view' },
    { label: 'Edit', name: 'edit' },
];
 
const columns = [   
    { label: 'Name', fieldName: 'Name' }, 
    { label: 'Industry', fieldName: 'Industry' },
    {
        type: 'action',
        typeAttributes: { rowActions: actions },
    }, 
];

export default class AccountListLWC extends LightningElement {
    accounts
    error
    filteers
    cols = columns;
    accountFilterSubscription
    @wire(searchAccounts,{searchTerm:'$filteers'})
    accounthandler({data,error}){
        if(data){
            console.log('datataa',data);
            this.accounts=data;
            console.log('acoiidjdjd',this.accounts);
        }
        if(error){
         this.error=error;   
        }
    }
    @wire(MessageContext)
    messageContext

    connectedCallback(){
        this.subscribeHandler();
    }
    subscribeHandler(){
        this.accountFilterSubscription=subscribe(this.messageContext,ACCOUNT_FILTERS,(message)=>this.handleFilterChanges(message))
    }
    handleFilterChanges(message){
        console.log('messgagege',message.filters);
        this.filteers=message.filters;
        console.log('filtersfsfs',this.filteers);
    }
    
    handleRowAction( event ) {
        console.log('eveneetdetail',event.detail);
        const actionName = event.detail.action.name;
        const row = event.detail.row;
        console.log('detailevent',JSON.stringify(event.detail))
        switch ( actionName ) {
            case 'view':
                this[NavigationMixin.Navigate]({
                    type: 'standard__recordPage',
                    attributes: {
                        recordId: row.Id,
                        actionName: 'view'
                    }
                });
                break;
            case 'edit':
                this[NavigationMixin.Navigate]({
                    type: 'standard__recordPage',
                    attributes: {
                        recordId: row.Id,
                        objectApiName: 'Account',
                        actionName: 'edit'
                    }
                });
                break;
            default:
        }

    }

}

whenever the row action is clicked I am encountering with this error :

Sorry to interrupt. This page has an error. You might just need to refresh it

Answer 1

The error because of below block from handleRowAction method.

this[NavigationMixin.Navigate]({
    type: 'standard__recordPage',
    attributes: {
        recordId: row.Id,
        actionName: 'view'
    }
});

This is happening because there is missing extension of NavigationMixin. Correct use is like this -

export default class MyCustomElement extends NavigationMixin(
    LightningElement
) {}

To correct your code, replace

FROM

export default class AccountListLWC extends LightningElement

WITH

export default class AccountListLWC extends NavigationMixin (LightningElement)