Search code examples
laravellaravel-bladelaravel-livewirealpine.jslaravel-jetstream

Laravel Livewire loading after Alpine.js after Update

I get the following error with a modal component on the profile page:

Console:

Uncaught TypeError: window.Livewire.find(...) is undefined

After the page is fully loaded, I can access livewire in the console:

window.Livewire.find(...)

It seems that Livewire ist loading before Alpine.js or it`s an Error in Jetstream (Delete Account Modal)

Updated packages from/to:

composer.json

"laravel/jetstream": "^3.2" -> "^4.0",
"livewire/livewire": "^2.11" -> "^v3.0",

package.json

"alpinejs": "^3.0.6" -> "^3.13.2",

delete-user-form.blade.php

<div class="mt-5">
    <x-danger-button wire:click="confirmUserDeletion" wire:loading.attr="disabled">
        {{ __('Delete Account') }}
    </x-danger-button>
</div>

<!-- Delete User Confirmation Modal -->
<x-dialog-modal wire:model.live="confirmingUserDeletion">
    ...
    content
    ...
</x-dialog-modal>

app.blade.php

<head>
    <!-- Scripts -->
    @vite(['resources/scss/app.scss', 'resources/js/app.js', 'node_modules/trix/dist/trix.esm.min.js', 'node_modules/trix/dist/trix.css'])

    <!-- Styles -->
    @livewireStyles
</head>
<body class="font-sans antialiased">
    ...
    content
    ...
    @stack('modals')
    @livewireScripts
</body>

I tried to move the @livewireScripts from before the </body> tag, it did not work either (and it is not a solution I would want to use).

Solution

  • If you're using Livewire 3, you shouldn't be installing AlpineJS manually to begin with. The installation guide is very clear about it. Removing alpinejs from your package.json should fix your issues (but only if you're using Livewire 3).

    If you are using plugins, and need to manually boot AlpineJS, then you should take a look at this section