`<AstroComponent />` inside Alpine.js `<template x->` no longer renders in Astro v5

[JackMarksThomas]

Astro Info

Astro                    v5.15.2
Vite                     v6.4.1
Node                     v22.20.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/alpinejs (v0.4.9)

If this issue only occurs in one browser, which browser is a problem?

N/A

Describe the Bug

In Astro v4, content inside a — including Astro components — would render normally, and any <script> tags from those components were automatically hoisted and bundled into the document . This allowed Alpine.js and similar client-side frameworks to dynamically instantiate UI elements that depended on component-level scripts.

In Astro v5, scripts are now rendered exactly where they are declared and are no longer hoisted or bundled together by default (see v5 migration guide
). As a result, Astro components rendered inside tags (for example, in x-if or x-for blocks) may appear correctly in the DOM but lose their functionality — their scripts are never executed because they remain inert inside the at render time.

This change makes it significantly harder to organize and componentize complex client-side UIs built with Alpine.js, since previously self-contained Astro components can no longer reliably initialize when rendered within Alpine-managed structures.

Astro v4

https://stackblitz.com/edit/github-autbjiyi-jwsv9wh9?file=package.json

Astro v5

https://stackblitz.com/edit/github-autbjiyi?file=src%2Fpages%2Findex.astro

What's the expected result?

Each card with a truthy card.image renders an component within the DOM when the Alpine template is evaluated.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-autbjiyi?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.