I'm getting this error: LWC component's @wire target property or method threw an error during value provisioning

Question

I'm using getListUi wire adapter to get listViews of an object and trying to put it into a picklist. But I'm getting the following error.

render threw an error in 'c:showListView' [LWC component's @wire target property or method threw an error during value provisioning. Original error: [Cannot read property 'lists' of undefined]]

This is the code:

import { LightningElement,wire,api,track } from 'lwc';
import PRODUCT_OBJECT from '@salesforce/schema/Product2';   
import { getListUi} from 'lightning/uiListApi';

export default class ShowPicklistValues extends LightningElement {
    @track selectedValue;
    @track allListViews;

    @wire(getListUi, {objectApiName: PRODUCT_OBJECT})
    wiredlistView({error,data}) {
    this.allListViews = data.lists;
    var listViewData = [];
    for(var i=0;i<this.allListViews.length;i++){
        listViewData.push({"label" : this.allListViews[i].label, "value" : this.allListViews[i].apiName});
    }
    this.allListViews = listViewData;
}

    handleChange(event) {
        this.value = event.detail.value;
    }
}

What am I doing wrong here?

Answer 1

Welcome to SF Stack Exchange.

You are likely getting this error because an error must have occurred during your wire process.

From the documentation:

data (Any type)—The value supplied by the adapter.

error (Error)—An error if the adapter wasn’t able to supply the requested data or if the adapter wasn’t found. Otherwise, this property is undefined.

In this case the error object came back instead of the data. Essentially since data did not come back your code attempts to execute undefined.lists which throws the error [Cannot read property 'lists' of undefined] you are seeing.

What you need to do is add an if statement to verify if data came back or not like so:

@wire(getListUi, {objectApiName: PRODUCT_OBJECT})
wiredlistView({error,data}) {
    if (data) {
        this.allListViews = data.lists;
        var listViewData = [];
        for(var i=0;i<this.allListViews.length;i++){
            listViewData.push({"label" : this.allListViews[i].label, "value" : this.allListViews[i].apiName});
    } else if (error) {
        console.log('An error has occurred:');
        console.log(error);
        // handle your error.
    }
}