Using HTMX and Alpine.js together (In a ASP.NET Core Project)

[JustSxm]

Hello!

So here is our headache:

We are building an application in ASP.NET Core with Razor Pages.
We have a page with a ViewComponent (you can think of it like pretty much Component in react, but its a tad different) which is an alpine autocomplete component who is self-contained

The reusable "Component":

@{
  var autocompleteFunction = "autocomplete" + Guid.NewGuid().ToString() + "()";
}
<div x-data="@autocompleteFunction">
   <input hx-trigger="change" hx-target="#target" hx-swap="innerHtml" hx-get="/url/to/html/block" />
   <ul>
    <template x-for="item in filteredItems()" :key="item.id">
        <li x-text="item.text" x-on:click="selectItem()" ></li>
      </template>
   </ul>
</div>
<script>
   function @autocompleteFunction {
   return {
      items: @Model.Data,
      //when something is selected in the li, put it in the input + some validation.... 
      //this triggers the change event and make htmx do a request to get the html and swap it out.
      }
   }
</script>

Now that part works well.

When a value is selected in that autocomplete, HTMX is used to get new html dependent on what was selected in the autocomplete (lets say I picked "Fruits" then now we get a list of all Fruits )

So now, htmx puts another autocomplete (which use the same component, but with the new data, and without the optional htmx parameters)

@{
  var autocompleteFunction = "autocomplete" + Guid.NewGuid().ToString() + "()";
}
<div x-data="@autocompleteFunction">
   <input />
   <ul>
    <template x-for="item in filteredItems()" :key="item.id">
        <li x-text="item.text" x-on:click="selectItem()" ></li>
      </template>
   </ul>
</div>
<script>
   function @autocompleteFunction {
   return {
      items: @Model.Data,
      //when something is selected in the li, put it in the input + some validation.... 
      //this triggers the change event and make htmx do a request to get the html and swap it out.
      }
   }
</script>

Though we get an error "Alpine express error: autocompletexxxxxx() is not defined".

When I look in the dom though, the script is right there with the function available. The function is callable from the console

I hope this is clear enough, if you need me to be more precise or to rephrase better, I will do. I just cannot show the actual code

[SimoTod]

Try putting the script tag before the component. The browser parses the dom top to bottom and probably alpine is eagerly loading the component before the browser has read the script tag

[JustSxm]

I have tried so, but unfortunately I was getting the same error. The only way I *partially* fixed the etror was by setting up a setTimeout with window.Alpine.initTree(container) in the script tag. Yes it did fix the issue, but the console was still initially spitting errors and it also keeps spitting errors when I use the component, so I felt like I was onto something, but didnt entirely fix it. Thanks!

[SimoTod]

The alpine mutation observer will try to init the component immediately (hence the error even when you reinit the component with a set timeout).
Does it change anything if you use Alpine.data instead of a global function to define your data context?

[ekwoka]

by default, HTMX injects dom and then handles the JS, since you can't bulk append script tags.

You need to have htmx inject the script tag alone first and then inject the components with alpine.

alternatively, use x-ignore and have an htmx:afterSettled handler that removes the x-ignore.

a set timeout would be the lazy way, just use the htmx events.

[JustSxm]

Well, after hours of testing the conclusion is that something in htmx 1.9 was broken. Upgrading the library to 2.0 fixed all my problems. Woo!