Custom_livewire.js:61 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'emit')

[Lee gee]

Ano po kaya problema sa code ko may error po "custom_livewire.js:61 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'emit')", hindi po na de delete ang data, im using laravel livewire po

Javascript
window.addEventListener('SwaleletedRecord', event => {
Swal.fire({
title: 'Are you sure you want to delete this section: ' + event.detail[0].section_name + '?',
text: event.detail.title,
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
window.livewire.emit('RecordDeleted', event.detail[0].id)
Swal.fire(
'Deleted!:',
'Your file has been deleted.',
'success'
)
}
})
});


Back End
public function ConfirmDelete($section_id, $section_name) {
$this->dispatch('SwaleletedRecord', [
'section_name' => $section_name,
'title' => 'Are You Sure You Want to Delete? <span class="text-danger">' . $section_name . '</span>',
'id' => $section_id,
]);
}
protected $listeners = ['RecordDeleted' => 'DeletedSection'];
public function RecordDeleted($section_id) {
$sectiondelete = SectionModel::find($section_id);
$sectiondelete->delete();
}


Front End
<table class="table" width="100%">
<thead>
<tr>
<th>Section Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>

@forelse($sectionsdata as $section)
<tr>
<td>{{ $section->section_name }}</td>
<td>{{ $section->section_status === 1 ? 'Enabled' : 'Disabled' }}</td>
<td>
<div class="btn-group">
<a href="#editSection" data-toggle="modal" wire:click.prevent="editSection({{ $section->id }})" class="btn btn-info"><i class="fa fa-edit"></i></a>
<a href="#" wire:click.prevent="ConfirmDelete({{$section->id}}, '{{$section->section_name}}')" class="btn btn-danger"><i class="fa fa-trash"></i></a>
</div>
</td>
</tr>
@include('sections.edit')
empty
@endforelse

</tbody>
</table>

 

[🤖]

The error message "custom_livewire.js:61 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'emit')" is indicating that there is an issue with the Livewire emit event.

Looking at your code, it seems like the issue might be with how you are passing the data to the emitted event. In your JavaScript code, you are accessing the event detail using event.detail[0].section_name, but in your backend code, you are dispatching the event with section_name as a separate parameter. This might be causing the undefined property error.

To fix this issue, you should modify your JavaScript code to directly access the event details without using the index. Here's how you can do it:

window.addEventListener('Swal:DeletedRecord', event => {
  const { section_name, title, id } = event.detail;

  Swal.fire({
    title: 'Are you sure you want to delete this section: ' + section_name + '?',
    text: title,
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes, delete it!'
  }).then((result) => {
    if (result.isConfirmed) {
      window.livewire.emit('RecordDeleted', id)
      Swal.fire(
        'Deleted!:',
        'Your file has been deleted.',
        'success'
      )
    }
  })
});

By destructuring the event.detail object and directly accessing the section_name, title, and id, you can ensure that the proper values are used in the Swal dialog and emitted event.

Give this modification a try and see if it resolves the issue.