Multiple Alpinejs file causes error

[Hujjat]

Hello!

I found an interesting issue with multiple alpinejs files on one page.

To explain it simply, having two alpine file through errors.

<script src="//unpkg.com/alpinejs" defer></script>
<script src="//unpkg.com/alpinejs" defer></script>

The first alpine initializer through errors because it can't find components of the second alpine file.

You might ask, remove one of them, that fixes the issue but I don't have control over this.

Let's say 2 third-party apps inject codes and both use Alpine. That's causing errors in the console and some components stop working.

Does anyone have any workaround for this?

Thank you.

[SimoTod]

Third parties shouldn't inject the CDN script, it's poor coding at their end. They should either ask users to include the cdn script or bundle the npm version in a separate namespace and use a custom prefix for directives to avoid clashes. I don't think there's anything you can do, either find different libraries or try to reach out to those vendors.

[Hujjat]

@SimoTod

The cdn was just an example. Even with the npm bundle, two alpine files load.

How do you namespace your alpine initializer?

Let's say both vendors have this codes.

Vendor A:

import Alpine from 'alpinejs';

import dropdown from './dropdown.js';
Alpine.data('dropdown', dropdown);

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

Vendor B:

import Alpine from 'alpinejs';

import selector from './selector.js';
Alpine.data('selector', selector);

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

Vendor A bundle file will through an error for the undefined selector component if we used x-data="selector" in Vendor B.

Vendor B is my code and How do I namespace it?

Thanks

[SimoTod]

import Alpine from 'alpinejs';

import dropdown from './dropdown.js'; Alpine.data('dropdown', dropdown);
Alpine.prefix('x-dd-'); //components will use x-dd-data="..."

Alpine.start();

This is just an example, there are probably other ways to achieve it but in general:

• you don't need to expose Alpine on window unless you need to access the Alpine variable from a different script.
• if you call Alpine.start twice without settings a separate prefix, you'll get errors and/or duplicate event listeners.

[Hujjat]

oh wow!

Thank you @SimoTod. Didn't know about prefix and didn't find in the doc as well. It's very useful. working great now. 🙌