I'm following this trailhead step-by-step but I got an error which I don't know how to resolve.
I found this similar question but the suggested solution is already implemented on my code, please advise.
bearList.js
import { loadStyle } from 'lightning/platformResourceLoader'; --> This is where I get the error 'No MODULE named markup://c:bearTile found'
import { LightningElement, track, wire } from 'lwc';
import ursusResources from '@salesforce/resourceUrl/ursus_park';
/** BearController.searchBears(searchTerm) Apex method */
import searchBears from '@salesforce/apex/BearController.searchBears';
export default class BearList extends LightningElement {
@track searchTerm = '';
@wire(searchBears, {searchTerm: '$searchTerm'})
bears;
connectedCallback() {
loadStyle(this, ursusResources + '/style.css');
}
handleSearchTermChange(event) {
// Debouncing this method: do not update the reactive property as
// long as this function is being called within a delay of 300 ms.
// This is to avoid a very large number of Apex method calls.
window.clearTimeout(this.delayTimeout);
const searchTerm = event.target.value;
// eslint-disable-next-line @lwc/lwc/no-async-operation
this.delayTimeout = setTimeout(() => {
this.searchTerm = searchTerm;
}, 300);
}
get hasResults() {
return (this.bears.data.length > 0);
}
}
bearList.html
<template>
<lightning-card title="Bears" icon-name="utility:animal_and_nature">
<div class="slds-card__body_inner">
<!-- Start bear list -->
<template if:true={bears.data}>
<lightning-input type="search"
onchange={handleSearchTermChange}
variant="label-hidden"
class="slds-m-bottom_small"
label="Search"
placeholder="Search for bears"
value={searchTerm}>
</lightning-input>
<lightning-layout multiple-rows="true" pull-to-boundary="small">
<template for:each={bears.data} for:item="bear">
<lightning-layout-item key={bear.Id} size="3" class="slds-p-around_x-small">
<c-bear-tile bear={bear}></c-bear-tile>
</lightning-layout-item>
</template>
</lightning-layout>
<!-- No bears found -->
<template if:false={hasResults}>
<div class="slds-align_absolute-center slds-m-vertical_small">
This is beary disturbing, we did not find results...
</div>
</template>
</template>
<!-- End bear list -->
<!-- Data failed to load -->
<template if:true={bears.error}>
<div class="slds-text-color_error">
An error occurred while loading the bear list
</div>
</template>
</div>
</lightning-card>
</template>
bearTile.html
<template>
<lightning-card title={bear.Name} class="bear-tile">
<div class="slds-p-horizontal_small">
<div class="slds-media">
<div class="slds-media__figure">
<img src={appResources.bearSilhouette} alt="Bear profile" class="bear-silhouette"/>
</div>
<div class="slds-media__body">
<p class="slds-m-bottom_xx-small">{bear.Sex__c}</p>
<p class="slds-m-bottom_xx-small">{bear.Age__c} years old</p>
<p class="slds-m-bottom_xx-small">{bear.Height__c} cm</p>
<p class="slds-m-bottom_xx-small">{bear.Weight__c} Kg</p>
</div>
</div>
</div>
</lightning-card>
</template>
bearTile.js
import { LightningElement, api } from 'lwc';
import ursusResources from '@salesforce/resourceUrl/ursus_park';
export default class BearTile extends LightningElement {
@api bear;
appResources = {
bearSilhouette: ursusResources +'/img/standing-bear-silhouette.png',
};
}
Best Answer
Found the solution - although the bearTile LWC was created in VSC it wasn't deployed yet, so all I had to do to resolve this is to deploy it and the error disappeared.