LWC Error: POSM_Item__c is not defined

Question

Apex Class

public with sharing class customSearchController {

@AuraEnabled(cacheable=true)
 public static list<POSM_Item__c> getContactList(string searchKey) {
     string sTempSearchKey = '%' + searchKey + '%';
     
    // create POSM Item list to store search result 
     list<POSM_Item__c> lstContact = new list<POSM_Item__c>();
  
    // query POSM Item records
     for(POSM_Item__c oItem : [SELECT Id, Name, POSM_Image__c, Brand__c, Item_Code__c
                         FROM POSM_Item__c
                         WHERE Name LIKE : sTempSearchKey]){
            lstContact.add(oItem);
     }
     
    //If there are no records found with searchKey then, throw aura exception with a message
      if(lstContact.size() == 0){
         throw new AuraHandledException('No Record Found..'); 
      }
      
     return lstContact;
 }
}

HTML

<template>
    <div class="slds-m-around_medium">
      
      <div class="slds-m-bottom_small">
          <lightning-input type="text"
             value={sVal}
             label="Contact Name"
             onchange={updateSeachKey}
             ></lightning-input>
       </div>
       
       <lightning-button label="Search"
          onclick={handleSearch}
          variant="brand"></lightning-button>
          
       <!-- custom data table(with SLDS style) to display contact list  -->  
       <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-m-top_small">
          <thead>
             <tr class="slds-line-height_reset">
                <th class="" scope="col">
                   <div class="slds-truncate" title="Name"> Name</div>
                </th>
                <th class="" scope="col">
                   <div class="slds-truncate" title="Image">Image</div>
                </th>
                <th class="" scope="col">
                   <div class="slds-truncate" title="Brand">Brand</div>
                </th>
                <th class="" scope="col">
                   <div class="slds-truncate" title="Item Code">Item Code</div>
                </th>
             </tr>
          </thead>
          
          <tbody>
             <!--iterate all contact records using for-each iteration -->    
             <template for:each={POSM_Item__c} for:item="POSM_Item__c">
                <tr class="slds-hint-parent" key={POSM_Item__c.Id}>
                   <td>
                      <div class="slds-truncate">{POSM_Item__c.Name}</div>
                   </td>
                   <td>
                      <div class="slds-truncate">{POSM_Item__c.POSM_Image__c}</div>
                   </td>
                   <td>
                      <div class="slds-truncate">
                         <lightning-formatted-phone value={POSM_Item__c.Brand__c} ></lightning-formatted-phone>
                      </div>
                   </td>
                   <td>
                      <div class="slds-truncate">
                         <lightning-formatted-email value={POSM_Item__c.Item_Code__c} ></lightning-formatted-email>
                      </div>
                   </td>
                </tr>
             </template>
          </tbody>
       </table>
    </div>
 </template>

Javascript

import { LightningElement,track} from 'lwc';
// import server side apex class method 
//import getItemList from '@salesforce/apex/customSearchController.getItemList';
import getContactList from '@salesforce/apex/customSearchController.getContactList';
// import standard toast event 
import {ShowToastEvent} from 'lightning/platformShowToastEvent'

export default class customSearch extends LightningElement {
   //@track: Marks a property for internal monitoring. A template or function using- 
   //this property forces a component to rerender when the property’s value changes.
   @track POSM_Item__c;
   sVal = '';

   // update sVal var when input field value change
   updateSeachKey(event) {
       this.sVal = event.target.value;
   }

   // call apex method on button click 
   handleSearch() {
       // if search input value is not blank then call apex method, else display error msg 
       if (this.sVal !== '') {
           getContactList({
                   searchKey: this.sVal
               })
               .then(result => {
                   // set @track contacts variable with return contact list from server  
                   this.POSM_Item__c = result;
               })
               .catch(error => {
                   // display server exception in toast msg 
                   const event = new ShowToastEvent({
                       title: 'Error',
                       variant: 'error',
                       message: error.body.message,
                   });
                   this.dispatchEvent(event);
                   // reset contacts var with null   
                   this.POSM_Item__c = null;
               });
       } else {
           // fire toast event if input field is blank
           const event = new ShowToastEvent({
               variant: 'error',
               message: 'Search text missing..',
           });
           this.dispatchEvent(event);
       }
   }
}

Answer 1

The problem comes from this line of code:

<template for:each={POSM_Item__c} for:item="POSM_Item__c">.

As the documentation states:

When using the for:each directive, use for:item="currentItem" to access the current item.

You are clearly creating a conflict by attempting to assign the same variable name for the current item which you've already assigned for the @track POSM_Item__c JS array.