Unable to resolve dependency [Parameter #0 [ <required> $event ]] in class App\Livewire\Modal

I have a livewire component that is a modal:

 class Modal extends Component
 {
    protected $listeners = ['openModal', 'closeModal'];

public $liveWireComponent = null;
public $liveWireParams = [];

public function openModal($event)
{
    $this->liveWireComponent = $event['liveWireComponent'];
    $this->liveWireParams = json_decode($event['liveWireParams'], true);
}

public function closeModal()
{
    $this->liveWireComponent = null;
    $this->liveWireParams = [];
}
}

I reference it in the template as this:

      <x-modal.button liveWireComponent="declaration-internal-notes-modal"
                        :liveWireParams="['declarationId' => $declaration->id]" class="button--light">
            Internal Notes
            @if ($declaration->hasInternalNotes())
                <span class="unread"></span>
            @endif
       </x-modal.button>

Because I am using Livewire 3 I have an Alpine component in the alpine.js file as follows:

  Alpine.data('modal', () => ({
    open: false,
    openModal(event) {
       this.open = true;
       this.$dispatch('openModal', event.detail);
    },
    closeModal() {
       this.open = false;
       this.$dispatch('closeModal');
    },
   }));

When I click on the button to open the modal, it errors with 'Unable to resolve dependency [Parameter #0 [ $event ]] in class App\Livewire\Modal'. I have recently upgraded the project I'm on from Livewire 2 to Livewire 3, so I have a feeling it maybe related to this error, but otherwise I'm not sure what is going on with it.

jamesregis

1 year ago

Level 1

Hello @ geometry dash breeze, as I know, the error "Unable to resolve dependency [Parameter #0 [ $event ]] in class App\Livewire\Modal" typically occurs when a Livewire component is unable to resolve a dependency due to changes in the Livewire version or the way events are handled. In Livewire 3, there have been changes in event handling that might be causing this issue. Livewire 3 introduced changes in event handling. Instead of passing the event as a parameter in Livewire component methods, I think you need to access the event properties directly. Modify your Livewire component as follows:

class Modal extends Component

{

protected $listeners = ['openModal', 'closeModal']; public $liveWireComponent = null; public $liveWireParams = [];

public function openModal($event)
{
    $this->liveWireComponent = $event['liveWireComponent'];
    $this->liveWireParams = json_decode($event['liveWireParams'], true);
}

public function closeModal()
{
    $this->liveWireComponent = null;
    $this->liveWireParams = [];
}

}

AmberBrion

2 days ago

Level 1

This is a really interesting breakdown of a Livewire modal issue, dependency resolution errors like this can be tricky to track down, especially when event parameters and bindings get involved. Clear examples like this help a lot when debugging component communication. It’s a bit like troubleshooting complex workflows in other industries too, where precision matters just as much as in managing projects for naples asphalt companies.

Please or to participate in this conversation.