search

hotwired-laravel / turbo-laravel

This package gives you a set of conventions to make the most out of Hotwire in Laravel.
https://turbo-laravel.com
MIT License
803 stars 50 forks source link

Permanent Alpine.js element throws error: Uncaught (in promise) TypeError: i is not a function #108

Closed alexmandrikdev closed 1 year ago

alexmandrikdev commented 1 year ago

Hey guys!

When I make the navigation bar permanent that contains Alpine.js, the app throws this error when I visit a page via Turbo Drive.

image

I'm getting this error from a fresh Laravel Breeze + Turbo Laravel installation (I've followed the installation guide).

The alpine-turbo-drive-adapter solves this problem, but it causes issues with the Livewire @entangle directive.

Do you have any ideas on how to fix this problem?

tonysm commented 1 year ago

@alexmandrikdev Hey, thanks for reporting. Do you have this snippet in the Alpine.js setup?

I'm gonna try to reproduce it here.

alexmandrikdev commented 1 year ago

@alexmandrikdev Hey, thanks for reporting. Do you have this snippet in the Alpine.js setup?

I'm gonna try to reproduce it here.

Yes, It was added by the php artisan turbo:install --alpine command just before the Alpine.js initialization.

image

tonysm commented 1 year ago

@alexmandrikdev can you move the alpine setup to the libs/alpine.js file? And make sure you place it before line 14 there. Let me know if that changes anything.

alexmandrikdev commented 1 year ago

@alexmandrikdev can you move the alpine setup to the libs/alpine.js file? And make sure you place it before line 14 there. Let me know if that changes anything.

I've already tried this, but it hasn't solved the problem.

image

This might be helpful. Every time I navigate to a different page, the event listener is added to the button repeatedly.

image

By the way, why does the turbo:install command put the initAlpineTurboPermanentFix function call before the Alpine initialization? Is this on purpose?

alexmandrikdev commented 1 year ago

I've published the app on GitHub: https://github.com/alexmandrikdev/laravel-turbo-integration-test.

tonysm commented 1 year ago

@alexmandrikdev

By the way, why does the turbo:install command put the initAlpineTurboPermanentFix function call before the Alpine initialization? Is this on purpose?

I think that's actually a bug in the installer command. I'm gonna take a look at it.

tonysm commented 1 year ago

Hey, I'm gonna close this. Not sure if it's still an issue for you. I have another issue to test with Livewire 3 here.