Warning / Error when ShowToast closes in LWC

Question

EDIT Nov 2020: I am no longer seeing an error in debug mode, just the warning message about the invalid icon name.

---

I believe I've found a minor bug / issue but would like to confirm. If there's a better place for me to put this bug report, please advise.

I've tested this in both my own application as well as the recipes application.

STEPS TO REPEAT:

1. Open recipes application to 'Misc' tab
2. Open Chrome dev tools console
3. Fire a ShowToast event with any variant
4. Wait for the Toast to disappear
5. Look at messages in Chrome dev tools console

If my Salesforce user debug mode is not enabled, I simply get a warning:

Invalid icon name utility:

If my Salesforce user debug mode is enabled, it becomes an error

Error: [LWC error]: Invalid url value "". Expected a non-empty string. <lightning-primitive-icon> <lightning-icon>

Here's an image in case it helps

Answer 1

I found the same thing. I have a quick action calling an aura wrapper using QuickActionWithoutHeader. It encloses a lightning web component. I fire a toast from the LWC when a button is clicked in the LWC.

When the toast closes (timed out or close box on toast banner clicked manually) the following error appears in the javascript console: icon.js:110 Invalid icon name utility

I am using in my LWC javascript controller the standard toast library: import { ShowToastEvent } from 'lightning/platformShowToastEvent';

I'm not sure, but it looks like this toast library is actually the one used by Aura and it is saying the icon is called "utility:" when it should be "utility:close" if you are using SLDS.

The full expansion of the error is:

icon.js:110 <lightning-icon> Invalid icon name utility:
set iconName    @   icon.js:110
set @   aura_proddebug.js:7985
setHook @   aura_proddebug.js:10095
cachedSetterByKey.<computed>    @   aura_proddebug.js:8324
InteropComponent.$attributeChange$  @   aura_proddebug.js:35501
changeHandlerFCV    @   aura_proddebug.js:35402
Aura.$Event$.$Event$.$executeHandlerIterator$   @   aura_proddebug.js:37499
Aura.$Event$.$Event$.$executeHandlers$  @   aura_proddebug.js:37473
(anonymous) @   aura_proddebug.js:37532
AuraInstance.$run$  @   aura_proddebug.js:49291
Aura.$Event$.$Event$.$fire$ @   aura_proddebug.js:37530
Component.$fireChangeEvent$ @   aura_proddebug.js:33115
PropertyReferenceValue$changeHandler    @   aura_proddebug.js:30890
Aura.$Event$.$Event$.$executeHandlerIterator$   @   aura_proddebug.js:37499
Aura.$Event$.$Event$.$executeHandlers$  @   aura_proddebug.js:37473
(anonymous) @   aura_proddebug.js:37532
AuraInstance.$run$  @   aura_proddebug.js:49291
Aura.$Event$.$Event$.$fire$ @   aura_proddebug.js:37530
Component.$fireChangeEvent$ @   aura_proddebug.js:33115
Component.set   @   aura_proddebug.js:33070
setVisibleList  @   visualMessageQueue.js:44
onVisualListChange  @   visualMessageQueue.js:60
onVisualListChange  @   visualMessageQueue.js:16
Action.$runDeprecated$  @   aura_proddebug.js:38034
Component$getActionCaller   @   aura_proddebug.js:33815
Aura.$Event$.$Event$.$executeHandlerIterator$   @   aura_proddebug.js:37499
Aura.$Event$.$Event$.$executeHandlers$  @   aura_proddebug.js:37473
(anonymous) @   aura_proddebug.js:37532
AuraInstance.$run$  @   aura_proddebug.js:49291
Aura.$Event$.$Event$.$fire$ @   aura_proddebug.js:37530
Component.$fireChangeEvent$ @   aura_proddebug.js:33115
PropertyReferenceValue$changeHandler    @   aura_proddebug.js:30890
Aura.$Event$.$Event$.$executeHandlerIterator$   @   aura_proddebug.js:37499
Aura.$Event$.$Event$.$executeHandlers$  @   aura_proddebug.js:37473
(anonymous) @   aura_proddebug.js:37532
AuraInstance.$run$  @   aura_proddebug.js:49291
Aura.$Event$.$Event$.$fire$ @   aura_proddebug.js:37530
Component.$fireChangeEvent$ @   aura_proddebug.js:33115
Component.set   @   aura_proddebug.js:33070
eval    @   toastManager.js:230
callbackWrapper @   aura_proddebug.js:49141
requestAnimationFrame (async)       
setToastList    @   toastManager.js:229
removeToast @   toastManager.js:210
onCloseToast    @   toastManager.js:44
onCloseToast    @   toastManager.js:9
Action.$runDeprecated$  @   aura_proddebug.js:38034
Component$getActionCaller   @   aura_proddebug.js:33815
Aura.$Event$.$Event$.$executeHandlerIterator$   @   aura_proddebug.js:37499
Aura.$Event$.$Event$.$executeHandlers$  @   aura_proddebug.js:37473
(anonymous) @   aura_proddebug.js:37532
AuraInstance.$run$  @   aura_proddebug.js:49291
Aura.$Event$.$Event$.$fire$ @   aura_proddebug.js:37530
fireCloseToast  @   toastMessage.js:64
eval    @   toastMessage.js:32
callbackWrapper @   aura_proddebug.js:49141
listener.$$lwcEventWrapper$$    @   aura_proddebug.js:2598

Answer 2

I have the same error while not using the toaster but on a conditional template. I have a button that pulls some data and shows a datatable. If the table is empty I give an error with an icon.

When I load data a second time and the table is not empty, the error template will be removed from the DOM and I get the icon error:

It looks like the conditional loading of templates and toasters removes a part of the icon-name when removed from the DOM and hence creates the error message.