Laravel Livewire loading after Alpine.js after Update

Question

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).

I think this will solve your issue @livewireScripts(['defer' => true]). — Khayam Khan
– Khayam Khan, Commented Feb 1, 2024 at 13:26

Yinci · Accepted Answer · 2024-02-07 07:37:13Z

4

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

answered Feb 7, 2024 at 7:37

Yinci

2,5901 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bloxxor Over a year ago

Thank you, that fixed the issue. I migrated from 2 to 3, so it works perfectly now.

Collectives™ on Stack Overflow

Laravel Livewire loading after Alpine.js after Update

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related