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? – sanket kumar May 5 '19 at 9:19
  • added as requested – Json May 5 '19 at 10:28
  • What do you think @sanketkumar? – Json May 6 '19 at 13:57
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
  • This solved my issue too! – garek007 Jul 22 '20 at 18:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.