I'm working through the LWC superbadge. I have passed the first 5 challenges, and in order to get to the six, I'm looking at the page. I haven't yet started the sixth challenge, but am just trying to get the boat tiles to display.

I have all the wiring/events etc set up, and am getting the boat data based on the user's selection of the boat type, but when trying to display the individual boat tiles, I get the following error: 

Uncaught (in promise) TypeError: Cannot set property 'nodeValue' of undefined search

I log the boats to the console, so I know they are there. It seems like the issue comes from instantiating the boatTile, because I output the boatName before the line with the component for the boatTile.

Relevant lines from boatSearchResults.js:

    @wire(getBoats, {boatTypeId: '$boatTypeId'})
    wiredBoats(results, error){
            this.boats = results.data;
            this.displayBoats = true;
            this.error = undefined;
            console.log('the boats: ', JSON.stringify(this.boats));
        else if(error){
            this.boats = undefined;
            this.displayBoats = false;
            this.error = error;
            console.log('no data, no error!!');

Relevant lines from boatSearchResults.html:

  <div class="slds-scrollable_y">
     <lightning-layout horizontal-align="center" multiple-rows>
         <template for:each={boats} for:item="boat">{boat.Name}
            <lightning-layout-item key={boat.Id} padding="around-small" size="small" small-device-size="6" medium-device-size="4" large-device-size="3" >
                <c-boat-tile selected-boat-id={selectedBoatId} boat={boat} onboatselect={updateSelectedTile}></c-boat-tile>

Note that I put in the boat name inside the iteration, and the first one always shows.

Output from conosle.log after setting boats:

the boats:  [{"Name":"Friend of the friends","Description__c":"It was a shot in the dark, but we love it now!","Geolocation__Latitude__s":36.083559,"Geolocation__Longitude__s":-114.76663,"Picture__c":"/resource/Houseboats/fishingboat1.png","Contact__c":"0034K000001lGllQAE","BoatType__c":"a014K000001PaJWQA0","Length__c":24,"Price__c":126000,"Id":"a024K0000016nAPQAY","Contact__r":{"Name":"Aaron Gray","Id":"0034K000001lGllQAE"},"BoatType__r":{"Name":"Fishing Boat","Id":"a014K000001PaJWQA0"}},{"Name":"Home Suite Home","Description__c":"We had a band playing in this boat, we rocked the boat, this was a timeless experience.","Geolocation__Latitude__s":20.217061,"Geolocation__Longitude__s":-103.027593,"Picture__c":"/resource/Houseboats/fishingboat2.jpg","Contact__c":"0034K000001lGlmQAE","BoatType__c":"a014K000001PaJWQA0","Length__c":22,"Price__c":173000,"Id":"a024K0000016nARQAY","Contact__r":{"Name":"Emanuel Manzanares","Id":"0034K000001lGlmQAE"},"BoatType__r":{"Name":"Fishing Boat","Id":"a014K000001PaJWQA0"}},{"Name":"Saxony","Description__c":"I spent uncounted hours sitting at the bow looking at the water and the sky, and it helped me getting calmer for the days to come. Such a peace of mind. This boat is very reliable.","Geolocation__Latitude__s":51.609471,"Geolocation__Longitude__s":12.380581,"Picture__c":"/resource/Houseboats/fishingboat1.png","Contact__c":"0034K000001lGluQAE","BoatType__c":"a014K000001PaJWQA0","Length__c":16,"Price__c":173000,"Id":"a024K0000016nAfQAI","Contact__r":{"Name":"James August","Id":"0034K000001lGluQAE"},"BoatType__r":{"Name":"Fishing Boat","Id":"a014K000001PaJWQA0"}},{"Name":"Casablanca","Description__c":"This boat is big enough for two. Just me and you. It was our wedding anniversary and my...


Declaration for the boat & selectedBoatIds in boatTile.js:


I don't receive any errors on the page, just in the console.

The full error stack:

aura_proddebug.js:11602 Uncaught (in promise) TypeError: Cannot set property 'nodeValue' of undefined
    at Object.setText (aura_proddebug.js:11602)
    at Object.updateNodeHook [as update] (aura_proddebug.js:8964)
    at patchVnode (aura_proddebug.js:5937)
    at updateDynamicChildren (aura_proddebug.js:5823)
    at aura_proddebug.js:9072
    at runWithBoundaryProtection (aura_proddebug.js:11096)
    at updateChildrenHook (aura_proddebug.js:9071)
    at Object.update (aura_proddebug.js:9283)
    at patchVnode (aura_proddebug.js:5937)
    at updateStaticChildren (aura_proddebug.js:5917)

Any help would be appreciated!

1 Answer 1


It turns out that the error was actually in the lightning-layout-item tag. I had the size attribute set to a string - small, instead of a number.

Adjusted code:

<lightning-layout-item  size="3" small-device-size="6" medium-device-size="4" large-device-size="3" key={boat.Id} padding="around-small">

Thanks to Nathan Shulman for his help!

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