Breeze Profile Menu sttoped working after install WireUI

[marcellopato]

Describe the bug JetStream Profile Menu, and Upload Profile Photo sttoped working after install WireUI

To Reproduce Steps to reproduce the behavior:

1. Have "flowbite": "^2.3.0" installed
2. Have Laravel Framework 10.48.3 installed
3. Have "laravel/jetstream": "^4.3" installed
4. "livewire/livewire": "^3.0",
5. "livewire/volt": "^1.6",
6. "wireui/wireui": "^1.19"

Expected behavior The profile menu should open

Screenshots or Videos If applicable, add screenshots or videos to help explain your problem.

Dependencies

• WireUI Version: 1.19
• Laravel Version: 10.48.3
• Alpine.js Version: ??? Just realise that I don't have Alpine installed!!! How COME???
• Livewire Version: ^3.0
• Lang: en_US

Desktop (If applicable, please complete the following information):

• OS: Linux Ubuntu 22.04
• Browser: chrome
• Version [Versão 123.0.6312.58 (Versão oficial) 64 bits

Smartphone (If applicable, please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[marcellopato]

Just installed Alpine and now I got this error on the console:

alpinejs.js?v=26832573:539 Uncaught ReferenceError: wireui_dropdown is not defined at [Alpine] wireui_dropdown (eval at safeAsyncFunction (alpinejs.js?v=26832573:586:19), <anonymous>:3:32) at alpinejs.js?v=26832573:611:21 at tryCatch (alpinejs.js?v=26832573:525:12) at evaluate (alpinejs.js?v=26832573:552:32) at Function.<anonymous> (alpinejs.js?v=26832573:2876:15) at flushHandlers (alpinejs.js?v=26832573:693:46) at stopDeferring (alpinejs.js?v=26832573:698:5) at deferHandlingDirectives (alpinejs.js?v=26832573:701:3) at initTree (alpinejs.js?v=26832573:196:3) at alpinejs.js?v=26832573:151:5

Should I change the component? `

...`

[PH7-Jack]

Hi @marcellopato, could you please create a public repository with the related issue? Or also give steps on how to reproduce them? Thanks mate

[marcellopato]

Hi @marcellopato, could you please create a public repository with the related issue? Or also give steps on how to reproduce them? Thanks mate

I've decided to uninstall Jetstream and use Breeze. So far, so good, but I will let you know if something goes wrong! Thanks!

[marcellopato]

Hey @PH7-Jack, the issue happened again. I installed a brand new fresh copy of Laravel 11 and breeze, livewire, alpine and everything was working good! Even a dark mode switcher! Then, when installed wireUI, the Profile menu and all dropdown stopped work. I created a public repository so You can clone and check, please!

https://github.com/marcellopato/PedroEstouAqui

[marcellopato]

I think I found the problem! I saw a video from this guy, and that's where I found wireUI and he said he changed the dropdown component name. I will test it tomorrow!

[marcellopato]

EUREKA! The problem is exactly at the dorpdown component. WireUI and Breeze dropdown has the same name and because of that, they clash. Just need to:

php artisan vendor:publish --tag="wireui.lang" php artisan vendor:publish --tag="wireui.config"

Open the config/wireui.php file and at the line 136, or at the:

'dropdown' => [ 'class' => Components\Dropdown::class, 'alias' => 'wui-dropdown', ],

Change the 'alias' like this, if you want.

Then restart npm run dev and you are good to go!

The tip came from this guy at YouTube The Complete TALL Stack Tutorial - FROM NOTHING TO PROD (Tailwind, Alpine, Laravel, Livewire & More)

Anyways, awesome job @PH7-Jack !