Dropdown not work when install fresh laravel jetstream with turbo-laravel

[vanthao03596]

• I followed install guide.
• Create new account in register page
• After login success, dropdown menu not work
• If i refresh page, everything work again

If i put @livewireScripts and livewire-turbolinks.js to guest layout everthing work as expected.

[tonysm]

uhm, I think you need the latest version of Livewire (dev-master). Support for Turbo wasn't tagged yet.

[tonysm]

Updated the documentation. Change Livewire version to dev-master and run composer update livewire/livewire. If that doesn't work, feel free to re-open the issue.

Example from the demo app here.

[vanthao03596]

@tonysm livewire support turbo in https://github.com/livewire/livewire/releases/tag/v2.3.6. If i remove app.js script from guest layout like your demo repo which mean we don't have turbo in authentication page, everthing work fine. I think alpine.js not work if we navigave with turbo after submit form.

[tonysm]

Uhm, indeed. I did remove the app.js from the guest layout on my demo app. I'll take another look at it tonight.

[vanthao03596]

I found one more issue. If i navigate between "Profile" and "Team Settings" several time, we have error "Alpine Error: "TypeError: Cannot read property '$wire' of undefined"". I tried to fix and found library alpine-turbo-drive-adapter

[tonysm]

The Alpine Turbo Drive Adapter kinda makes it work, but I did have to either:

1) Add all Livewire scripts/styles to the guest.blade.php layout as well; or 2) Remove the app.js from the guest layout

Tbh, I'm not sure why the app.js is added to the guest layout, doesn't seem to be used anywhere in the scaffolding pages. But I do think it makes sense to use JS in guest pages, so I'm kinda torn.

I'll go with updating the guest.blade.php to also add the Livewire scripts there 😉

[tonysm]

Hey, @vanthao03596

I've made the changes to also include the alpine-turbo-drive-adapter to the turbo:install call (see https://github.com/tonysm/turbo-laravel/releases/tag/0.0.5), can you take a look? I've also made Stimulus optional, so if you want that too, you need to pass the --stimulus flag.

I'm going to close, but feel free to re-open it if you think it needs to be changed.

[vanthao03596]

Great work! @tonysm

[vanthao03596]

@tonysm alpine-turbo-drive-adapter not work anymore, i have Alpine Error: "TypeError: Cannot read property '$wire' of undefined again. if i remove alpine-turbo-drive-adapter from app.js, everything work as expected

[tonysm]

@vanthao03596 you're right. I just tested it and looks like Alpine just works now without the adapter. Weird. Will investigate a bit.

[tonysm]

A little update: the problem here has to do with the Alpine+Livewire's entanglement feature together with Turbo. I've opened a PR with the breaking test in the Livewire repo here, if anyone wants to give it a shot.

In the meantime, I shared a workaround on Twitter which consists of simply disabling Turbo visits to Jetstreamp pages and using full page reloads instead. We can achieve that by adding a couple of meta tags to the page head only when visiting via Jetstream.

resources/views/layouts/app.blade.php

@if (config('jetstream-page'))
    <meta name="turbo-cache-control" content="no-cache">
    <meta name="turbo-visit-control" content="reload">
@endif

app/Http/Middleware/JetstreamRoutes.php

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class JetstreamRoutes
{
    public function handle(Request $request, Closure $next)
    {
        config(['jetstream-page' => true]);

        return $next($request);
    }
}

app/Http/Kernel.php

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{
    // ...

    protected $routeMiddleware = [
        // ...
        'jetstream-routes' => \App\Http\Middleware\JetstreamRoutes::class,
    ];
}

config/jetstream.php

<?php

return [
    // ...

    'middleware' => ['web', 'jetstream-routes'],

    // ...
];

[tonysm]

Folks, I'm closing this issue because this should be fixed in the latest Alpine+Livewire versions. If you see this still happens, feel free to re-open it.