Custom LWC error Uncaught TypeError: Cannot read property 'apply' of undefined

10.7K    Asked by ConnorPeake in Web-development , Asked on Jul 29, 2021

I have created a Custom LWC Datatable following Creating Custom Data Types in Salesforce DocumentationMy Custom LWC cell component as below,

and it's Javascript Controller as below,
import { LightningElement, track, api } from 'lwc'; export default class invoiceCustomAction extends LightningElement { handlePayNow(event){ console.log('test A'); //console.log('value '+ this.value); } handleDownload(event){ console.log('test B'); //console.log('download '+ this.value); } }

My Custom Data table component as below: Markup

enter image description here

JS Controller

import LightningDatatable from 'lightning/datatable'; import invoiceCustomAction from './invoiceCustomAction.html'; export default class test_InvoicesCustomDatatable extends LightningDatatable { static customTypes = { customInvoiceCell: { template: invoiceCustomAction, standardCellLayout: true // Provide template data here if needed } //more custom types here }; }

Consumer code:

component markup:

JS Controller
import { LightningElement,track,api } from 'lwc'; import FORM_FACTOR from '@salesforce/client/formFactor'; import getInvoices from '@salesforce/apex/Test_InvoiceListController.getInvoices'; const columns = [ { label: 'Date issued', fieldName: 'issueDate', type: 'date', sortable : true }, { label: 'Account', fieldName: 'accountNo' , sortable : true, type: 'text'}, { label: 'Invoice #', fieldName: 'invoiceNo', sortable : true, type: 'text'}, { label: 'Date due by', fieldName: 'dueDate', type: 'date', sortable : true }, { label: 'Amount', fieldName: 'amount', type: 'currency', sortable : true }, { label: 'Status', fieldName: 'status', sortable : true, type: 'text'}, { label: 'Action', type: 'customInvoiceCell', fieldName: 'index'} ]; export default class Test_InvoiceList_Outstanding extends LightningElement { @track idw = {listIW:[]}; // Invoices Display Wrapper Object @track page = 1; // Current Page number @api perpage = 10; // Records per Page @track pages = []; // Page numbers array set_size = 3; // Number of Page number buttons @track numberOfPages = 1; // Number of pages to show @track sortedBy = 'accountNo'; // Sort field @track sortDirection = 'asc'; // Sort direction @track isLoading = true; // Loading UI @track searchText = ''; // Search text @track filteredResults = [] // Filtered Invoice wrappers displayed on Datatable,etc. @track pageStartIdx = 0; // Page start record index @track pageEndIdx = 0; // Page end record index @track searchTextPlaceHolder = 'Search by keyword, name'; // Search Text Place holder @track selectedRows = []; // Current page's row selection @track allSelectedRows = new Map(); // PageNo => Selected row Ids[] map to keep persistent selection in paginated data table mapPage2SelIdx = new Map() navRefresh = false; renderedCallback(){ this.columns = columns; this.renderButtons(); } renderButtons = ()=>{ this.template.querySelectorAll('button').forEach((but)=>{ =,10)?'blue':'white'; }); } get pagesList(){ let mid = Math.floor(this.set_size/2) + 1 ; if( > mid){ if ( // Last page return this.pages.slice(,; else return this.pages.slice(,; } return this.pages.slice(0,this.set_size); } async connectedCallback(){ this.isLoading = true; this.idw = await getInvoices(); if (this.idw!=null && this.idw.listIW!=null) this.filteredResults = this.idw.listIW.slice(0); this.isLoading = false; this.setPages(this.filteredResults); } pageData = ()=>{ let page =; let perpage = this.perpage; let startIndex = (page*perpage) - perpage; let endIndex = (page*perpage); this.pageStartIdx = startIndex + 1; this.pageEndIdx = (endIndex > this.filteredResults.length) ? this.filteredResults.length : endIndex; return this.filteredResults.slice(startIndex,endIndex); } setPages = (data)=>{ = 1; this.pages = []; this.numberOfPages = Math.ceil(data.length / this.perpage); for (let index = 1; index <= this.numberOfPages; index++) { this.pages.push(index); } } get hasPrev(){ return > 1; } get hasNext(){ return < this xss=removed>{ this.navRefresh = true;; } onPrev = ()=>{ this.navRefresh = true;; } onPageClick = (e)=>{ this.navRefresh = true; = parseInt(,10); } get currentPageData(){ this.selectedRows = this.selectedRows.splice(0); return this.pageData(); } get currentSelection(){ let selectedRecs = this.mapPage2SelIdx.get(; if (!Array.isArray(selectedRecs)) selectedRecs = []; return selectedRecs; } updateColumnSorting(event) { this.sortedBy = event.detail.fieldName; this.sortDirection = event.detail.sortDirection; this.sortData(this.sortedBy); } sortData(sortedBy){ var data = this.filteredResults; var reverse = this.sortDirection !== 'asc'; data.sort(this.sortBy(sortedBy, reverse)); this.filteredResults = data; } sortBy(field, reverse, primer) { var key = primer ? function(x) {return primer(x[field])} : function(x) {return x[field]}; reverse = !reverse ? 1 : -1; return function (a, b) { return a = key(a), b = key(b), reverse * ((a > b) - (b > a)); } } handleFilterChange(event) { } onRowSelection(event){ } }

On the custom datatable component cell, when you click any button/url except the one having event handler, it's throwing the below error.

enter image description here

Any help to understand what it means? And how to resolve typeerror: cannot read property 'apply' of undefined? what could be missing in the custom LWC component? Thanks!

Answered by Dhananjay Singh

In the custom data table implementation code (i.e., the component that extends LightningDatatable/ in your case test_InvoicesCustomDatatable), a reference should be provided to either another custom component or an HTML file. This custom component or HTML file is the one that defines the custom cell structure (& related code) to be used in the custom data table.

Case 1: If the custom cell displays static content and doesn't implement any custom user interaction, then define a custom HTML file and place it within the custom data table component directory [i.e., test_InvoicesCustomDatatable will have test_InvoicesCustomDatatable.html as well as another HTML file (say customCellContent.html) that defines cell content]. Now, in the component JS file, you can import HTML file using the code import customCellContent from './customCellContent.html' and use this import to define the custom data types. Sample code as shown below:

        static customTypes = { customDataType: { template: customCellContent, standardCellLayout: true, // Provide template data here if needed typeAttributes: ['attrA', 'attrB'] // Define custom attributes, if needed } };

Case 2: If the custom cell has complex structure or implements custom user interactions (such as buttons etc.), then create a new LWC component (say myCustomCellComp) and place all the cell related HTML/ code logic in the same. Now, create a HTML file (customCellContent.HTML) within the custom datatable component directory (similar to previous case) and place the following code in it : . This HTML file will serve as a conduit between the cell component and the datatable component. Importing the HTML reference and defining custom data type in the JS file will remain the same as previous case.

So, depending on the requirement, you might need to create either 2 or 1 lightning web components and any consumer lwc can make use of the custom data table component. For more details, refer SF official documentation.


 Reason for getting this typeerror: cannot read property 'apply' of undefined is, you have disabled Lightning Components Debug Mode for the current user.

 To resolve this:

  1. Go to Setup
  2. In quick find type 'Debug Mode'
  3. Click on the Debug Mode menu under Lightning Components
  4. Select the user you wish to enable Debug mode for and click enabled.
  5. Head back to your component and this time you should see a more descriptive error on the Modal.

Your Answer

Answer (1)

The error message "Uncaught TypeError: Cannot read property 'apply' of undefined" typically indicates that there's an issue with how a function or method is being called or accessed in your Lightning Web Component (LWC) code. Here are some steps you can take to troubleshoot and resolve this error:

Check for Typos: Ensure that you've correctly spelled the method or function you're trying to call. Even a small typo can cause this type of error.

Verify Function Existence: Make sure that the function or method you're trying to call actually exists and is accessible from the context where you're calling it. Double-check the component's JavaScript file or any imported modules to confirm.

Check for Undefined Variables: If you're accessing properties or methods of an object, verify that the object is defined and initialized properly. Accessing properties or methods of undefined objects can result in this error.

Inspect Stack Trace: Look at the stack trace provided in the browser's console when the error occurs. It might give you more context about where the error originated in your code, helping you pinpoint the issue.

Review Recent Changes: If this error started occurring after making changes to your code, review those changes carefully. Undoing recent changes or using version control to revert to a previous working state can help isolate the cause of the error.

Debugging Tools: Utilize browser developer tools to set breakpoints, inspect variables, and step through your code to identify where the error occurs.

Consult Documentation: If you're using third-party libraries or frameworks, refer to their documentation to ensure that you're using their methods and functions correctly.

Ask for Help: If you're unable to identify the cause of the error, consider asking for help on forums, community platforms, or reaching out to colleagues who might be able to provide insights into the issue.

By following these steps and carefully reviewing your code, you should be able to identify and resolve the "Uncaught TypeError: Cannot read property 'apply' of undefined" error in your Lightning Web Component.

1 Month


Parent Categories