Getting [NoErrorObjectAvailable] Script error on clicking a button of lightning datatable which fires a custom event from one component to another

Question

I have a LWC component accountList which is a datatable. It has Account names and a show detail button for each row. When I click show detail button a separate component should populate the account details (Name, Industry, Rating) in a lightning card. Im using Custom Event for this and a main parent component named accountDisplay which acts as a middleman. Im using this account display component for the following reason:- I wish to fire a custom event which passes record ID from accountList to accountDisplay and then the accountDisplay component will catch the event and store the record ID in a public variable. Then finally a third component (accountDetails) will make use of this public variable recordID and use a lightning record view form to populate the data. also I use event.detail.row.id to get the ID because this is used to get rowID from Datatable. When I click the show details button on my lightning page. I get the error: Getting [NoErrorObjectAvailable] Script error on accountList.js as per stack trace. Im trying hard but unable to solve the problem. Please help

Here is my code

AccountList.html

<template>
    <lightning-card title="Account List" class="slds-border_bottom" icon-name="custom:custom63">
        <template if:true={accounts.data}>
               
  
            <lightning-datatable key-field="Id"  
                                 data={accounts.data}  
                                 columns={columns}  
                                 hide-checkbox-column="true"   
                                 onrowaction={callRowAction}>  
            </lightning-datatable>            
    
    </template>

    </lightning-card>
</template>

AccountList.js

import { LightningElement, track, wire, api } from 'lwc';
import getAccList from '@salesforce/apex/GetAccountList.getAccList';

export default class AccountList extends LightningElement {

    

    @track columns = [
        { label: 'Name', fieldName: 'Name', type: 'text' },
        {type: "button", typeAttributes: {  
            label: 'Show Details',  
            name: 'Show Details',  
            title: 'Show Details for this account',  
            disabled: false,  
            value: 'view',  
            iconPosition: 'left'
        }}

    ]
    @wire(getAccList)accounts;

    callRowAction(event){
        event.preventDefault();
        debugger;
        const recId =  event.detail.row.Id;
       this.dispatchEvent(new CustomEvent("rowselected",{detail:recId}));
    }

}

AccountDisplay.html (My parent LWC component)

<template>
    <div class="slds-grid slds-gutters">
          <div class="slds-col slds-size_2-of-3">
                <c-account-list onrowselected ={accountselected}></c-account-list>
          </div>
          
          <div class="slds-col slds-size_1-of-3">
              <div class="slds-card">
                      <div class="slds-p-around_medium">
                            <c-account-details recordid ={recordId}></c-account-details>
                      </div>
              </div>

          </div>
    </div>
 </template>

AccountDisplay.js

import { api, LightningElement } from 'lwc';

export default class AccountDisplay extends LightningElement {

    @api
    recordId;

    accountselected(event){

        this.recordId= event.detail.row.Id;
    }

}

My AccountDetails.html

<template>

    <lightning-card title ="AccountDetails">
        <lightning-record-view-form
        object-api-name="Account"
        record-id={recordId} >
        <div class="slds-grid">
            <div class="slds-col slds-size_1-of-2">
                <lightning-output-field field-name="Name"> </lightning-output-field>
                <lightning-output-field field-name="Rating"> </lightning-output-field>
            </div>
            <div class="slds-col slds-size_2-of-2">
                <lightning-output-field field-name="Industry"> </lightning-output-field>
            </div>
        </div>
        </lightning-record-view-form>
        <div class="slds-clearfix">
            <lightning-button variant="brand" label="Create Contact" onclick={actionToCreateContactNav} class="slds-float_right"></lightning-button>
        </div>
    </lightning-card>
</template>

AccountDetails.js

import { LightningElement,api, wire, track } from 'lwc';
import getAccDetails from '@salesforce/apex/GetAccountList.getAccDetails';

export default class AccountDetails extends LightningElement {

@api
recordId;

@track
accountId;

@wire(getAccDetails, {theId: '$accountId'}) accounts;


}

Apex Class

public with sharing class GetAccountList {
   
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccList(){
        List<Account> accList = [SELECT Id, Name, Rating, Industry
                                 FROM Account 
                                 LIMIT 3 ];
        return accList;
    }

    @AuraEnabled(cacheable=true)
    public static Account getAccDetails(Id theId){

        Account acc = [SELECT Id, Name, Rating, Industry 
                        FROM Account 
                        WHERE Id =:theId];

            return acc;            


    }
}

This is what I have

The Problem below

Answer 1

Running this in an Aura app, I got a much more useful error:

Uncaught TypeError: Cannot read properties of undefined (reading 'Id')

Which made me realize that this event handler was wrong:

accountselected(event){
    this.recordId= event.detail.row.Id;
}

It should have been just:

accountselected(event){
    this.recordId= event.detail;
}

But that's kind of unusual, so I'd suggest adding a property to the event detail:

  callRowAction(event) {
    const recordId = event.detail.row.Id;
    this.dispatchEvent(new CustomEvent("rowselected", { detail: { recordId } }));
  }

Which makes the event handler:

accountselected(event){
    this.recordId= event.detail.recordId;
}

In addition, you have properties @api recordId and @track accountId, but you're not using accountId. In AccountDetails.js:

@wire(getAccDetails, {theId: '$accountId'}) accounts;

Should be:

@wire(getAccDetails, {theId: '$recordId'}) accounts;

Then, in accountDisplay.html, you also had a mistyped property:

<c-account-details recordid ={recordId}></c-account-details>

Should be:

<c-account-details record-id ={recordId}></c-account-details>

It's also worth noting that you're not actually using the getAccDetails method, since you used a lightning-record-view-form. You don't need the wire method at this point.