Livewire 3 Alpine doesn't work with Laravel Mix

I am trying to upgrade to Livewire 3 and I can't get Alpine to work with the bundling method (I am using Laravel Mix, I can't use Vite).

This is my webpack.mix.js:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js');

This is my app.js:

import {Alpine, Livewire} from '../../vendor/livewire/livewire/dist/livewire.esm';
import Clipboard from '@ryangjchandler/alpine-clipboard'

Alpine.plugin(Clipboard)

Livewire.start()

And this is my welcome.blade.php:

<html>

<head>
    @livewireStyles

    <script src="{{ mix('js/app.js') }}" defer></script>
</head>

<body>
    <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>

    @livewireScriptConfig
</body>

</html>

After compiling with npm run dev, I keep getting this error:

Alpine Expression Error: func(...).catch is not a function
Uncaught TypeError: func(...).catch is not a function

Is there really no way to use Livewire 3, Alpine, and Laravel Mix with the bundling method?

tihoti

2 years ago

Level 14

I struggled with the same issue and concluded that migrating from mix to view is the best way. Laravel shift can help you here.

https://laravel-news.com/webpack-to-vite

https://laravelshift.com/convert-laravel-mix-to-vite

Please or to participate in this conversation.