Alpine.data() throws uncaught reference error

[viveckio]

I've a form components on a page Astro that has a Alpine.data within a <script>. I am using the astro ViewTransition API for client side routing. When I directly load the form page, it works completely fine with Astro.data properly initialised but when I start form some other page and navigate to the form, it throws Uncaught Reference errors because the Alpine.data is not initialised at all. I've opted out of the Client Routing using ViewTransition and now it's working fine.

The problem I feel is ViewTransition is intercepts the navigation loads the HTML first without running the script and initializing alpine data. I looked through the discussions and haven't seen anybody facing this issue, given that Alpine is used with astro more.

[viveckio]

Okay, so after hours of grind some of the points that I want to put out here just in case someone else is looking for similar issue are:

• When using alpine with astro integration, astro takes care of initialising alpine, processing the script tags etc. So, if you're using Astro.data (or other) directive in some astro component script tag, there is no need to wrap it under astro:init event listener.
• Using View Transition lifecycles to hook the script reinitialising and ordering is a mess to work with. Only use it for showing loaders and manipulating DOM. In this case I needed too run the script before the component renders but I couldn't get it right.

So the solution that is astro-standard and works all the time is that use alpine integration with entrypoint file to configure alpine. In default export function add all Alpine.data contexts you need in your application.

Also, I think there should be a section for integrations in Alpine documentation as well so that people doesn't start tripping for most trivial things like this.
Or may be it just me!

[ekwoka]

Yeah, you'd need to make sure the scripts evaluate before Alpine does anything.

so you could use some of the internal Alpine APIs like mutateDom or stopObservingMutations to ensure those run first then init the tree of the new elements.

[viveckio]

How would it make sure that the script executes before component renders?
May be an example or a resource you can point to?

[ekwoka]

I mean, there are a lot of ways.

like, processing the scripts first, and only then adding the content to the page.