In laravel 10 livewire 3 app I try to use toast library to show
$this->dispatch('PersonalPageMessageSuccess', [
'title' => 'Tasks for News',
'message' => 'News task was created !',
]);
In resources/views/livewire/personal/page-header.blade.php file :
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<div>
<script>
window.addEventListener('PersonalPageMessageSuccess', event => {
console.log('PersonalPageMessageSuccess event::')
console.log(event)
popupAlert(event.detail.title, event.detail.message, 'success')
event.stopPropagation();
return false;
})
...
function popupAlert(title, text, textType) {
if (typeof textType == "undefined") {
textType = "info"
}
toastr.options = {
closeButton: true,
debug: false,
progressBar: false,
positionClass: 'toast-top-right',
onclick: null,
showEasing: 'swing',
hideEasing: 'linear',
closeDuration: 44000,
closeEasing: 'linear'
};
console.log(textType)
console.log(toastr)
toastr['success'](text);
But I got error :
toastr.js:474 Uncaught TypeError: Cannot read properties of undefined (reading 'extend')
and printscreen :
Which is the valid way to use toast library in my app ?
