Toast message not fired in LWC

Question

I have the written the following code which creates a contact record and fires a toast message on successful creation of the record. The problem with the code is the record is created but the toast message is not displayed.

HTML:

<template>
<lightning-card title="Create Contacts" class="slds-p-around_medium">
    <lightning-input type="text" class="slds-m-around_medium" data-id="firstNameId" label="Enter your First Name" onchange={inputHandler}></lightning-input>
    <lightning-input type="text" class="slds-m-around_medium" data-id="lastNameId" label="Enter your Last Name" onchange={inputHandler}></lightning-input>
    <lightning-input type="email" class="slds-m-around_medium" data-id="emailID" label="Enter your Email" onchange={inputHandler}></lightning-input>
    <lightning-button label="Create Contact" class="slds-m-around_medium" variant="brand" onclick={createContact}></lightning-button>
</lightning-card>

JS:

import { LightningElement } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import {showToastEvent} from 'lightning/platformShowToastEvent';

export default class RecordCreationLWC extends LightningElement {

    firstName;
    lastName;
    email;
    errormessage='';
   

    inputHandler(event){
        if(event.target.dataset.id  === 'firstNameId'){
        this.firstName = event.target.value;
        console.log(this.firstName);
        }
        else if(event.target.dataset.id  === 'lastNameId'){
        this.lastName = event.target.value;
        console.log(this.lastName);
        }
        else if(event.target.dataset.id  === 'emailID'){
        this.email = event.target.value;
        console.log(this.email);
        }
    }

    createContact(event){
        const fields = {'FirstName' : this.firstName, 'LastName' : this.lastName, 'Email': this.email};
        createRecord({'apiName' : 'Contact','fields' :  fields}).then(response => {
            console.log(response.id)
            this.showToast();
        }).catch(error => {
                this.errormessage = error.body.message;
        })
    }

    showToast() {
        const event = new ShowToastEvent({
            title: 'Contact',
            message: 'Contact created successfully',
            variant: 'success'
        });
        this.dispatchEvent(event);
    }
}

XML:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <!--<target>lightning__Tab</target>-->
        <!--<target>lightning__RecordAction</target>-->
        <!--<target>lightning__Inbox</target>-->
        <!--<target>lightning__UtilityBar</target>-->
        <!--<target>lightning__FlowScreen</target>-->
        <!--<target>lightningSnapin__ChatMessage</target>-->
        <!--<target>lightningSnapin__Minimized</target>-->
        <!--<target>lightningSnapin__PreChat</target>-->
        <!--<target>lightningSnapin__ChatHeader</target>-->
        <!--<target>lightningCommunity__Page</target>-->
        <!--<target>lightningCommunity__Default</target>-->
        <!--<target>lightningCommunity__Page_Layout</target>-->
        <!--<target>lightningCommunity__Theme_Layout</target>-->
    </targets>
</LightningComponentBundle>

Answer 1

There is a casing problem while importing toast message. Following line:

import { showToastEvent } from 'lightning/platformShowToastEvent';

should be:

import { ShowToastEvent } from 'lightning/platformShowToastEvent';