Cannot Read Property \'filename\' of Undefined Salesforce

I have created a Custom LWC Datatable following Creating Custom Information Types in Salesforce Documentation . My Custom LWC cell component as below,

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

My Custom Data table component equally below: Markup

JS Controller

          import LightningDatatable from 'lightning/datatable'; import invoiceCustomAction from './invoiceCustomAction.html'; consign default class test_InvoicesCustomDatatable extends LightningDatatable { static customTypes = { customInvoiceCell: { template: invoiceCustomAction, standardCellLayout: true // Provide template data here if needed } //more than 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: 'engagement', sortable : true }, { characterization: 'Account', fieldName: 'accountNo' , sortable : true, type: 'text'}, { label: 'Invoice #', fieldName: 'invoiceNo', sortable : true, type: 'text'}, { characterization: 'Date due by', fieldName: 'dueDate', blazon: 'date', sortable : true }, { label: 'Corporeality', fieldName: 'amount', type: 'currency', sortable : true }, { label: 'Status', fieldName: 'status', sortable : true, type: 'text'}, { label: 'Action', type: 'customInvoiceCell', fieldName: 'alphabetize'} ]; export default form Test_InvoiceList_Outstanding extends LightningElement { @track idw = {listIW:[]}; // Invoices Display Wrapper Object @runway page = ane; // Current Page number @api perpage = 10; // Records per Page @runway pages = []; // Page numbers array set_size = three; // Number of Page number buttons @rail numberOfPages = 1; // Number of pages to prove @track sortedBy = 'accountNo'; // Sort field @track sortDirection = 'asc'; // Sort direction @track isLoading = true; // Loading UI @rail searchText = ''; // Search text @runway filteredResults = [] // Filtered Invoice wrappers displayed on Datatable,etc. @track pageStartIdx = 0; // Page start record index @track pageEndIdx = 0; // Page terminate record alphabetize @rails searchTextPlaceHolder = 'Search by keyword, proper name'; // Search Text Place holder @track selectedRows = []; // Current page'southward row selection @track allSelectedRows = new Map(); // PageNo => Selected row Ids[] map to go along persistent selection in paginated data table mapPage2SelIdx = new Map() navRefresh = false; renderedCallback(){ this.columns = columns; this.renderButtons(); } renderButtons = ()=>{ this.template.querySelectorAll('push button').forEach((but)=>{ but.style.backgroundColor = this.folio===parseInt(simply.dataset.id,x)?'blue':'white'; }); } get pagesList(){ permit mid = Math.floor(this.set_size/2) + one ; if(this.page > mid){ if (this.folio==(this.pages.length)) // Last page return this.pages.slice(this.folio-mid-1, this.folio+mid-ane); else return this.pages.slice(this.folio-mid, this.page+mid-1); } render this.pages.piece(0,this.set_size); } async connectedCallback(){ this.isLoading = true; this.idw = await getInvoices(); if (this.idw!=cipher && this.idw.listIW!=null) this.filteredResults = this.idw.listIW.slice(0); this.isLoading = false; this.setPages(this.filteredResults); } pageData = ()=>{ let page = this.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)=>{ this.page = i; this.pages = []; this.numberOfPages = Math.ceil(data.length / this.perpage); for (let alphabetize = 1; index <= this.numberOfPages; index++) { this.pages.push(index); } } become hasPrev(){ render this.page > 1; } get hasNext(){ return this.page < this xss=removed>{ this.navRefresh = true; ++this.page; } onPrev = ()=>{ this.navRefresh = true; --this.page; } onPageClick = (e)=>{ this.navRefresh = true; this.page = parseInt(e.target.dataset.id,10); } go currentPageData(){ this.selectedRows = this.selectedRows.splice(0); return this.pageData(); } go currentSelection(){ allow selectedRecs = this.mapPage2SelIdx.get(this.page); if (!Array.isArray(selectedRecs)) selectedRecs = []; return selectedRecs; } updateColumnSorting(event) { this.sortedBy = effect.detail.fieldName; this.sortDirection = effect.detail.sortDirection; this.sortData(this.sortedBy); } sortData(sortedBy){ var data = this.filteredResults; var opposite = this.sortDirection !== 'asc'; data.sort(this.sortBy(sortedBy, reverse)); this.filteredResults = data; } sortBy(field, opposite, primer) { var key = primer ? office(x) {return primer(10[field])} : function(10) {return x[field]}; contrary = !reverse ? 1 : -1; render function (a, b) { return a = cardinal(a), b = key(b), contrary * ((a > b) - (b > a)); } } handleFilterChange(outcome) { } onRowSelection(event){ } }        

On the custom datatable component prison cell, when you click whatsoever button/url except the one having event handler , it'south throwing the beneath error.

Any assist to understand what information technology means? And how to resolve typeerror: cannot read holding 'utilise' of undefined? what could be missing in the custom LWC component? Thank you!

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

Instance 1: If the custom cell displays static content and doesn't implement any custom user interaction, then ascertain 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 jail cell content]. Now, in the component JS file, yous tin can import HTML file using the code import customCellContent from './customCellContent.html' and use this import to define the custom data types. Sample lawmaking as shown below:

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

Instance 2: If the custom prison 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 aforementioned. Now, create a HTML file (customCellContent.HTML) within the custom datatable component directory (similar to previous case) and identify the following lawmaking in it : . This HTML file will serve equally a conduit between the jail 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 demand to create either 2 or one lightning spider web components and whatever consumer lwc can make use of the custom data table component. For more details, refer SF official documentation.

Or

 Reason for getting this typeerror: cannot read belongings '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 blazon 'Debug Way'
   
3. Click on the Debug Fashion menu under Lightning Components
   
4. Select the user you wish to enable Debug mode for and click enabled.
   
5. Head dorsum to your component and this time you should see a more descriptive error on the Modal.
   

alonzostictied.blogspot.com

Source: https://www.janbasktraining.com/community/web-development/cannot-read-property-apply-of-undefined

Share this post