LWC Component Error: Cannot read properties of undefined (reading ‘description)

lightning-web-components

Using a Custom Metadata Type to store relationships between text fields, I'm trying to create an LWC to surface data as dependent picklists. However, when I add the LWC to a record page, I get this error upon loading:

enter image description here

Message:
[Cannot read properties of undefined (reading 'description')]

Component Descriptor:
markup://lightning:combobox

Function:
eval

Here is the code for my LWC, can anyone help me understand what is missing?

FieldMappings.js

    import { LightningElement, wire } from 'lwc';
import getMetadataRecords from '@salesforce/apex/FieldMappingsController.getPicklistMetadata';

export default class FieldMappings extends LightningElement {
  supportProductCategoryOptions = [];
  supportIssueTypeOptions = [];
  supportProductGroupOptions = [];
  resolutionActionTakenOptions = [];
  issueGroupOptions = [];
  issueSubGroupOptions = [];

  selectedSupportProductCategory = '';
  selectedSupportIssueType = '';
  selectedSupportProductGroup = '';
  selectedResolutionActionTaken = '';
  selectedIssueGroup = '';
  selectedIssueSubGroup = '';

  @wire(getMetadataRecords)
metadataRecords({ error, data }) {
  if (data) {
    console.log(data)
    this.supportProductCategoryOptions = Array.from(data).reduce((options, record) => {
      console.log(options, record.supportProductCategory);
      if (options.indexOf(record.supportProductCategory) === -1) {
        options.push(record.supportProductCategory);
      }
      return options;
    }, []);
    console.log(this.supportProductCategoryOptions);
  } else if (error) {
    console.error(error);
  }
}

  handlesupportProductCategoryChange(event) {
    this.selectedSupportProductCategory = event.target.value || '';
    if (this.metadataRecords.data) {
      this.supportIssueTypeOptions = this.metadataRecords.data.reduce((options, record) => {
        if (record.supportProductCategory === this.selectedSupportProductCategory && options.indexOf(record.supportIssueType) === -1) {
          options.push(record.supportIssueType);
        }
        return options;
      }, []);
    }
    this.selectedSupportIssueType = '';
    this.supportProductGroupOptions = [];
    this.resolutionActionTakenOptions = [];
    this.issueGroupOptions = [];
    this.issueSubGroupOptions = [];
  }

  handlesupportIssueTypeChange(event) {
    this.selectedSupportIssueType = event.target.value || '';
    this.supportProductGroupOptions = [];
    this.resolutionActionTakenOptions = [];
    this.issueGroupOptions = [];
    this.issueSubGroupOptions = [];
    if (this.metadataRecords.data) {
      this.supportProductGroupOptions = this.metadataRecords.data.reduce((options, record) => {
        if (record.supportIssueType === this.selectedSupportIssueType && options.indexOf(record.supportProductGroup) === -1) {
          options.push(record.supportProductGroup);
        }
        return options;
      }, []);
    }
    this.selectedSupportProductGroup = '';
  }

  handlesupportProductGroupChange(event) {
    this.selectedSupportProductGroup = event.target.value || '';
    if (this.metadataRecords.data) {
      this.resolutionActionTakenOptions = this.metadataRecords.data.reduce((options, record) => {
        if (record.supportProductGroup === this.selectedSupportProductGroup && options.indexOf(record.resolutionActionTaken) === -1) {
          options.push(record.resolutionActionTaken);
        }
        return options;
      }, []);
    }
    this.selectedResolutionActionTaken = '';
    this.issueGroupOptions = [];
    this.issueSubGroupOptions = [];
  }

  handleresolutionActionTakenChange(event) {
    this.selectedResolutionActionTaken = event.target.value || '';
    if (this.metadataRecords.data) {
      this.issueGroupOptions = this.metadataRecords.data.reduce((options, record) => {
        if (record.resolutionActionTaken === this.selectedResolutionActionTaken && options.indexOf(record.issueGroup) === -1) {
            options.push(record.issueGroup);
        }
        return options;
      }, []);
    }
    this.issueGroupOptions = [];
    this.issueSubGroupOptions = [];
}

handleissueGroupChange(event) {
    this.selectedIssueGroup = event.target.value || '';
    if (this.metadataRecords.data) {
      this.issueSubGroupOptions = this.metadataRecords.data.reduce((options, record) => {
        if (record.issueGroup === this.selectedIssueGroup && options.indexOf(record.issueSubGroup) === -1) {
            options.push(record.issueSubGroup);
        }
        return options;
      }, []);
    }
    this.issueSubGroupOptions = [];
}
}

FieldMappings.html

<template>
<lightning-combobox 
    label="Support Product Category"
    value={selectedSupportProductCategory} 
    options={supportProductCategoryOptions} 
    onchange={handlesupportProductCategoryChange}
    description="Select a category from the list">
</lightning-combobox>
<lightning-combobox 
    label="Support Issue Type" 
    value={selectedSupportIssueType} 
    options={supportIssueTypeOptions} 
    onchange={handlesupportIssueTypeChange}
    description="Select a category from the list">
</lightning-combobox>
<lightning-combobox 
    label="Support Product Group" 
    value={selectedSupportProductGroup} 
    options={supportProductGroupOptions} 
    onchange={handlesupportProductGroupChange}
    description="Select a category from the list">
</lightning-combobox>
<lightning-combobox 
    label="Resolution/Action Taken" 
    value={selectedResolutionActionTaken} 
    options={resolutionActionTakenOptions} 
    onchange={handleresolutionActionTakenChange}
    description="Select a category from the list">
</lightning-combobox>
<lightning-combobox 
    label="Issue Group" 
    value={selectedIssueGroup} 
    options={issueGroupOptions} 
    onchange={handleissueGroupChange}
    description="Select a category from the list">
</lightning-combobox>
<lightning-combobox 
    label="Issue Sub-Group" 
    value={selectedIssueSubGroup} 
    options={issueSubGroupOptions} 
    onchange={handleissueSubGroupChange}
    description="Select a category from the list">
</lightning-combobox>

FieldMappingsController.cls

public with sharing class FieldMappingsController {

@AuraEnabled(cacheable=true)
public static List<Field_Mapping__mdt> getPicklistMetadata() {
    return [SELECT Support_Product_Category__c, Support_Issue_Type__c, Support_Product_Group__c, Resolution_Action_Taken__c, Issue_Group__c, Issue_Sub_Group__c FROM Field_Mapping__mdt];
}

}

Update
I was able to resolve the error by updating this piece of the JavaScript file to use the API name of the property that would form the unique array:

    @wire(getMetadataRecords)
metadataRecords({ error, data }) {
  if (data) {
    console.log(data)
    this.supportProductCategoryOptions = Array.from(data).reduce((options, record) => {
      // console.log(options, record.Support_Product_Category__c);
      if (options.indexOf(record.Support_Product_Category__c) === -1) {
        options.push(record.Support_Product_Category__c);
      }
      return options;
    }, []);
    console.log(this.supportProductCategoryOptions);
  } else if (error) {
    console.error(error);
  }
}

However, now, I'm not seeing the unique values that are part of the supportProductCategorOptions array populating the options in the combobox – any thoughts around this?

enter image description here

Second Note

handlesupportProductCategoryChange(event) {
    this.selectedSupportProductCategory = event.target.value || '';
    console.log(this.selectedSupportProductCategory);
    console.log(this.metadataRecords.data);
    if (this.metadataRecords.data) {
      this.supportIssueTypeOptions = [...new Set(data.map((record)=>record.Support_Issue_Type__c))].map((category)=>({label:category, value:category}));
      console.log(this.supportIssueTypeOptions);

    }
    this.selectedSupportIssueType = '';
    this.supportProductGroupOptions = [];
    this.resolutionActionTakenOptions = [];
    this.issueGroupOptions = [];
    this.issueSubGroupOptions = [];
  }

I'm noticing the 'console.log(this.metadataRecords.data);' is returning undefined in the log, but not sure why that would be the case since on the @wire call, for the console log I have for data, I'm seeing values for Support_Issue_Type__c

{
    "Id": "m0i3J000000CdbaQAC",
    "MasterLabel": "SD_8",
    "DeveloperName": "SD_8",
    "Support_Product_Category__c": "Environmental Sensor",
    "Support_Issue_Type__c": "ES2 Data Not Updating",
    "Support_Product_Group__c": "ES-2",
    "Resolution_Action_Taken__c": "Transfer to Asset Tracking POD",
    "Issue_Group__c": "Cell Modem",
    "Issue_Sub_Group__c": "LTE Coverage"
}

Best Answer

If you look at the documentation, you'll see that description is not a valid attribute for lightning-combobox. The description attribute is a property you can add to an individual element in the list of options:

statusOptions = [
    { value: 'new', label: 'New', description: 'A new item' },
    {
        value: 'in-progress',
        label: 'In Progress',
        description: 'Currently working on this item',
    },
    {
        value: 'finished',
        label: 'Finished',
        description: 'Done working on this item',
    },
];
Related Topic