Prevent Alpine.js from loading more than once?

[yabdab]

I build components for a certain wysiwyg platform and I use alpine.js to power them all.

I build my own version of alpine with all the plugins I need.

The problem ...

Whenever another component developer uses alpine.js also, then 2 copies of alpine.js are loading into the page 😖.

When this happens I get errors like below...

unhandledrejection handler received a non-error.
{
  "isFromCancelledTransition": true
}

Is there a way I can build my version of Alpine so it soes not conflict with other copies?

Or just prevent alpine from loading more than once period?

I think jQuery does something like this with noConflict?

Thanks for any help.

[SimoTod]

You can use a custom prefix for your directives. https://tinytip.co/tips/alpine-prefix

[yabdab]

@SimoTod So if I build my version of alpine to use say yd- instead of x- on all alpine calls, then I should be good?

[djmtype]

Based on my experience, even when using if (!window.Alpine) (window.Alpine = Alpine).start(), I still need to add custom prefixes when multiple Alpine components are present.

However, using if (!window.Alpine) (window.Alpine = Alpine).start() did get rid of the issue I was having, and Alpine is no longer being loaded (imported) more than once where applicable.

[yabdab]

@djmtype Nice! I will give that a try. Thanks.

[ekwoka]

You can check if window.Alpine is already defined before calling start.

could even do it before downloading Alpine...

[yabdab]

Would this work or is there a more elegant way ?

if (typeof window.Alpine === "undefined") {
  window.Alpine = Alpine;
  Alpine.start();
}

[ekwoka]

if (!window.Alpine) 
  (window.Alpine = Alpine).start()
  
// or

if (!('Alpine' in window))
  (window.Alpine = Alpine).start()
  
// or

window.Alpine ?? (window.Alpine = Alpine).start()

😎

[yabdab]

Thanks brother! Will give this a try.