• Ankit Rawat 41
  • NEWBIE
  • 15 Points
  • Member since 2019

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 2
    Replies

I am having trouble completing this badge. I keep getting an error that reads "We can’t find 'reduceErrors' imported into contactList.js."

I double checked the component, it is saved and has the the import statement. My workspace also has the ldsUtils component and even that is saved. This should have been a walk in the park challenge as a similar one is already stated in the trailhead module. Even with similar code as mentioned, I get an error: (https://trailhead.salesforce.com/content/learn/modules/lightning-web-components-and-salesforce-data/handle-server-errors)

//JS FILE
import {
    reduceErrors
} from 'c/ldsUtils';
import {
    LightningElement,
    wire
} from 'lwc';

import FIRST_NAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LAST_NAME_FIELD from '@salesforce/schema/Contact.LastName';
import EMAIL_FIELD from '@salesforce/schema/Contact.Email';
import getContacts from '@salesforce/apex/ContactController.getContacts';

const COLUMNS = [{
        label: 'First Name',
        fieldName: FIRST_NAME_FIELD.fieldApiName,
        type: 'text'
    },
    {
        label: 'Last Name',
        fieldName: LAST_NAME_FIELD.fieldApiName,
        type: 'text'
    },
    {
        label: 'Email',
        fieldName: EMAIL_FIELD.fieldApiName,
        type: 'email'
    },
];

export default class ContactList extends LightningElement {

    columns = COLUMNS;
    errors;
    @wire(getContacts)
    contacts;


    get errors() {
        console.log('this.contacts.error: ', this.contacts.error);
        return (this.contacts.error) ? reduceErrors(this.contacts.error) : [];
    }
}

//HTML FILE
<template>
    <lightning-card title="Contact List">


        <template if:true={errors}>
            <p>{errors}</p>
        </template>

        <!--<lightning-datatable key-field="Id" data={contacts.data} columns={columns}>
        </lightning-datatable> -->
    </lightning-card>


</template>

//Controller

public with sharing class ContactController {
    
    @AuraEnabled(cacheable = true)
    public static List<Contact> getContacts(){
        
        //return [SELECT FirstName, LastName, Email FROM Contact];
        throw new AuraHandledException('Forced error');
    }
}
Hi all, I am working on the Handle Server Error part in Trailhead as part of the Lightning Web Components and Salesforce Data Module

https://trailhead.salesforce.com/en/content/learn/modules/lightning-web-components-and-salesforce-data/handle-server-errors?trail_id=build-lightning-web-components

I am attempting to allow for error handling and write my code as follows

ContactList.js
import { LightningElement, wire } from 'lwc';
import {
    reduceErrors
} from 'c/ldsUtils';
import getContactList from '@salesforce/apex/ContactController.getContactList';

export default class ContactList extends LightningElement {
    @wire(getContactList) contacts;

    handleSelect(event) {
        // 1. Prevent default behavior of anchor tag click which is to navigate to the href url
        event.preventDefault();
        // 2. Create a custom event that bubbles. Read about event best practices at http://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.events_best_practices
        const selectEvent = new CustomEvent('contactselect', {
            detail: { contactId: event.currentTarget.dataset.contactId }
        });
        // 3. Fire the custom event
        this.dispatchEvent(selectEvent);
    }
    get errors() {
        return (this.accounts.error) ?
            reduceErrors(this.accounts.error) : [];
    }
}



contactList.html
<template>
    <template if:true={contacts.data}>
        <template if:true={errors}>
            <p>{errors}</p>
        </template>
        <template for:each={contacts.data} for:item="contact">
            <a
                href="#"
                key={contact.Id}
                data-contact-id={contact.Id}
                onclick={handleSelect}
            >
                <lightning-layout>
                    <lightning-layout-item>
                        <img src={contact.Picture__c} alt="Profile photo" />
                    </lightning-layout-item>
                    <lightning-layout-item padding="horizontal-small">
                        <p>{contact.Name}</p>
                    </lightning-layout-item>
                </lightning-layout>
            </a>
        </template>
    </template>
</template>

ContactController.cls
public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactList() {
        throw new AuraHandledException('Forced error');
        /*return [
            SELECT Id, Name, Title, Phone, Email, Picture__c
            FROM Contact
            WHERE Picture__c != null
            WITH SECURITY_ENFORCED
            LIMIT 10
        ];*/
    }

    @AuraEnabled(cacheable=true)
    public static List<Contact> findContacts(String searchKey) {
        String key = '%' + searchKey + '%';
        return [
            SELECT Id, Name, Title, Phone, Email, Picture__c
            FROM Contact
            WHERE Name LIKE :key AND Picture__c != null
            WITH SECURITY_ENFORCED
            LIMIT 10
        ];
    }

    @AuraEnabled(cacheable=true)
    public static Contact getSingleContact() {
        return [
            SELECT Id, Name, Title, Phone, Email, Picture__c
            FROM Contact
            WITH SECURITY_ENFORCED
            LIMIT 1
        ];
    }
}




But I get this error We can’t find 'reduceErrors' imported into contactList.js. Any steps I need to take here.