Error Handling: Toast: please provide at least the "label" property to show the toast

ליאור נכתב על ידי ליאור לביא, עודכן בתאריך 28/10/2023

Error Message

Toast: please provide at least the "label" property to show the toast

Why Are We Seeing This Error Message?

The error message Toast: please provide at least the "label" property to show the toast may appear in the browser's console when dispatching a ShowToastEvent in an LWC (Lightning Web Component) as shown in the following example:

<!-- myComponent.html -->
<template>
	<lightning-button label="Show Toast" onclick={showToast}>
	</lightning-button>
</template>
// myComponent.js

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class MyComponent extends LightningElement {

    showToast(){
        const event = new ShowToastEvent({
            message: 'Well Done!',
            variant: 'success',
            mode: 'dismissible'
        });
        this.dispatchEvent(event);
    }
}

Solution

The solution to the error message Toast: please provide at least the "label" property to show the toast is very simple. You need to add the title property to the list of attributes for the ShowToastEvent and provide it with a non-falsy value in JavaScript. Falsy values in JavaScript are 0, null, undefined and false. Please note that the error message is misleading since it references a label property, which is not part of the ShowToastEvent attributes. Here's the corrected code from the previous example to prevent the error message from appearing in the console:

// myComponent.js - Fixed

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class MyComponent extends LightningElement {

    showToast(){
        const event = new ShowToastEvent({
            message: 'Well Done!',
            variant: 'success',
            mode: 'dismissible',
            title: 'Success!'
        });
        this.dispatchEvent(event);
    }
}

To understand how we got to this solution, you need to do three things:

    1. Click on the file name in the error message in the browser's console and examine the code that generates the error message. In this case, you can inspect the argument e in this function during runtime using a breakpoint in the browser: 
      // showToastEvent.js

(function s() {
    return (function() {
        $A.componentService.addModule('markup://lightning:showToastEvent', "lightning/showToastEvent", ["exports"], function(e) {
            const t = "lightning__showtoast";
            class o extends CustomEvent {
                constructor(e) {
                    const o = {
                        bubbles: true,
                        cancelable: true,
                        composed: true
                    };
                    if (e) {
                        const {label: t} = e;
                        if (!t) {
                            console.error('Toast: please provide at least the "label" property to show the toast')
                        }
                        o.detail = e
                    }
                    super(t, o)
                }
            }
            e.SHOW_TOAST_EVENT_NAME = t;
            e.ShowToastEvent = o;
            Object.defineProperty(e, "__esModule", {
                value: true
            })
        });
    }
    )
}
)()

      If you examine the e argument during runtime, you'll see that it contains two fields: label and toast. The toast field holds an object that looks very similar to the ShowToastEvent object.

    2. The next step is to read the documentation for the Platform Show Toast Event, with a focus on the required attributes of the object.
    3. After careful inspection of the code in the browser, you will notice something interesting. The e argument contains almost all the fields of the ShowToastEvent, but one crucial field is missing: title. What's essential to know about title is that it is a mandatory field for ShowToastEvent. From this, you can infer that Salesforce's code takes the value of the title field from the ShowToastEvent and maps it to the label field. If you forget to add the title field to ShowToastEvent or give it a falsy value, the condition on line 16 becomes true and triggers the error message you are receiving.

For Further Reading