Import alpine 3 breaks wireui

[willmkt]

When I install Alpine via NPM and impor from app.js it breaks all components.

npm install alpinejs@3 --save-dev

app.js import Alpine from "alpinejs";

window.Alpine = Alpine; Alpine.start();

after that all components get undefined.

If I use link in the admin it works, but I need to use imported because using link breaks dropzone.js component.

Is there a way to use it imported?

Thanks

[PH7-Jack]

@willmkt Are you importing the scripts in the correct order?

[willmkt]

@PH7-Jack I have tried in all the possible ways, can you give an example of the correct way?

[PH7-Jack]

Follow this install guide https://livewire-wireui.com/docs/get-started#installation

wireui alpine other js

[PH7-Jack]

Could you provide me the versions of your alpinejs and livewire?

[joelhmetz]

In my project, I imported by npm and not by script and it worked.

@livewireStyles

And app.js

require('./bootstrap');

import Alpine from 'alpinejs';

window.Alpine = Alpine;

//Alpine.start();

window.Wireui.hook('load', () => Alpine.start());

[PH7-Jack]

@joelhmetz nice, prefer the NPM to the CDN. Is working for you?

[joelhmetz]

With Laravel Jetstream it was the only way I could run.

[PH7-Jack]

Great. Thanks for reporting @joelhmetz

[willmkt]

I have tried all possible ways to import alpine, but it always breaks with wireui.

After @joelhmetz mention Jetstream, I tried and it works fine.

@PH7-Jack can you check why there is this problem?

Thanks.

[PH7-Jack]

@willmkt the CDN is complicated to manage, sometimes the alpine load first of wireui. Glad to know that is working, thanks