0

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',
    };
}
3
  • Can you add your bearTile.js file too? May 5, 2019 at 9:19
  • added as requested
    – Json
    May 5, 2019 at 10:28
  • What do you think @sanketkumar?
    – Json
    May 6, 2019 at 13:57

1 Answer 1

2

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.

1

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .