Alphine and Livewire on Re render

#1

What seems to be the problem:

I have a modal which toggles using alpine.js, there is a button in modal where it is calls Livewire function, which works fine. Then Livewire re-renders the view, I click on opening modal, it opens the modal. But for some weird reason when I click on the modal it throws this error

directive.js:48 Uncaught TypeError: Cannot read property 'match' of null
    at _default.parseOutMethodAndParams (directive.js:48)
    at _default.get (directive.js:20)
    at node_initializer.js:139
    at Component.value (index.js:382)
    at HTMLDivElement.handler (node_initializer.js:131)

Steps to Reproduce:

   <div class="card-header" x-data="{open : false}" x-init="{open : false}">
        <div>Quiz List</div>
        <div x-on:click="open = true">Create New Quiz</div>
        {{--  Create Quiz Modal --}}
        <div x-show="open" x-on:click.away="open = false">
            <div>
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Create New Quiz</h5>
                            <button type="button" class="btn btn-secondary">X</button>
                        </div>
                            <div class="modal-body">
                                <input type="text" wire:model="name">
                                @error('name') <span class="error alert-danger">{{ $message }}</span> @enderror
                            </div>
                            <div class="modal-footer">
                                <button type="button" wire:click="store" class="btn btn-primary">Create</button>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Are you using the latest version of Livewire: Yes, using Livewire 1.0.3 & Latest Alpine

Do you have any screenshots or code examples: Refer above

#2

Were you able to figure out what was causing this error?

I created a livewire component that has a view with a div that overlays another and any click on that div generates the same error you got.

1 Like