NoErrorObjectAvailable for a lwc

Question

HTML

<template>
    <lightning-card>
        <lightning-record-form object-api-name={objectApiName}
            onsuccess = {handleSuccess}
            fields={CONTACT_FIELDS}> 
        </lightning-record-form>
    </lightning-card>
</template>

JS

import { LightningElement} from 'lwc';
import CONTACT_OBJECT from '@salesforce/schema/Contact';
import FIRST_NAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LAST_NAME_FIELD from '@salesforce/schema/contact.LastName';
import EMAIL_FIELD from '@salesforce/schema/contact.Email';
import {showToastEvent } from 'lightning/platformShowToastEvent'
export default class ContactCreator extends LightningElement {
    objectApiName = CONTACT_OBJECT;
    CONTACT_FIELDS = [FIRST_NAME_FIELD,LAST_NAME_FIELD,EMAIL_FIELD];
    handleSuccess(event){
        const toastEvent = new showToastEvent({
            title: "Contact Created",
            message: event.detail.id,
            variant: "success"
        });
        this.dispatchEvent(toastEvent);
    }
}

Now when I use the component to create a contact record I receive the following error:

[NoErrorObjectAvailable] Script error.
a()@https://static.lightning.force.com/ap27/auraFW/javascript/nj61v-uP3bGswhb-VTdr6Q/aura_prod.js:1025:196
{anonymous}()@https://static.lightning.force.com/ap27/auraFW/javascript/nj61v-uP3bGswhb-VTdr6Q/aura_prod.js:1025:389
dispatchEvent()@https://static.lightning.force.com/ap27/auraFW/javascript/nj61v-uP3bGswhb-VTdr6Q/aura_prod.js:21:32794
P.dispatchEvent()@https://static.lightning.force.com/ap27/auraFW/javascript/nj61v-uP3bGswhb-VTdr6Q/aura_prod.js:21:8008
P.handleSuccess()@https://resourceful-raccoon-s4pqyc-dev-ed.lightning.force.com/components/lightning/recordForm.js:1:7969

I already am using event.detail correctly so what am I missing?

Answer 1

JavaScript is case sensitive so when you are importing import {showToastEvent } from 'lightning/platformShowToastEvent' make sure that you use import {ShowToastEvent } from 'lightning/platformShowToastEvent' ( Capital 'S' )

import { LightningElement} from 'lwc';
import CONTACT_OBJECT from '@salesforce/schema/Contact';
import FIRST_NAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LAST_NAME_FIELD from '@salesforce/schema/contact.LastName';
import EMAIL_FIELD from '@salesforce/schema/contact.Email';
import {ShowToastEvent  } from 'lightning/platformShowToastEvent'
export default class Test1 extends LightningElement {


objectApiName = CONTACT_OBJECT;
fields = [FIRST_NAME_FIELD,LAST_NAME_FIELD,EMAIL_FIELD];
handleSuccess(event) {
  
    const evt = new ShowToastEvent ({
        title: 'Contact created',
        message: 'Record ID: ' + event.detail.id,
        variant: 'success',
    });
    this.dispatchEvent(evt);
}
}