LWC @wire returns undefined

Question

I'm trying to fetch Contacts to datatable.

Here is Apex class:

    @AuraEnabled(Cacheable = true)
    public static List<Contact> getPaginatedContacts(Integer pageNumber, Integer pageSize){
        return [SELECT Id, Name FROM Contact LIMIT :pageSize OFFSET :pageNumber];
    }

    @AuraEnabled(Cacheable = true )
    public static Integer getContactsCount() {
        return [SELECT COUNT() FROM Contact];
    }

}

LWC component

    <lightning-card title="Available Contacts" icon-name="standart:contact_list">
        <div>Hello</div>
        <div class="slds-m-around_medium">
            <template if:true={contacts}>
                <lightning-datatable
                        key-field="Id"
                        data={contacts}
                        columns={columns}>
                </lightning-datatable>
            </template>
            <br/>
            <!--<c-paginator
                    onfirstpage={firstPageHandler}
                    onlastpage={lastPageHandler}>
            </c-paginator>-->
        </div>
    </lightning-card>
</template>

JS file of the component:

import getPaginatedContacts from '@salesforce/apex/ContactsPagableController.getPaginatedContacts';
import getContactsCount from '@salesforce/apex/ContactsPagableController.getContactsCount';

export default class ContactsTable extends LightningElement {

    @track columns = [
        {
            label: 'Id',
            fieldName: 'Id'
        },
        {
            label: 'Name',
            fieldName: 'Name'
        }
    ];

    @track pageNumber = 0;
    @track pageSize = 5;
    @track contactsCount;
    @track contacts;

    @wire(getPaginatedContacts,
        {
            pageNumber: '$pageNumber',
            pageSize: '$pageSize'
        })
    wiredContacts({
                      error,
                      data
                  }) {
        if (data) {
            console.log(data);
            this.contacts = data;
            console.log(this.contacts);

        } else if (error) {
            console.log(error);
        }
    }
}

I've stuck at this moment. console.log(data); shows array of contacts with necessary fields, but console.log(this.contacts); shows Proxy {}[[Handler]]: tr[[Target]]: Array(0)[[IsRevoked]]: false

When I try to open the page it shows: "Error during LWC component connect phase: [Unknown token: 'undefined'. Are you missing a tokens file or declaration?]"

Answer 1

You have made a spelling mistake in LWC component in the icon-name

<lightning-card title="Available Contacts" icon-name="standart:contact_list">

Please change 'standart' to 'standard' and the code should work.