In case it helps anyone else, I was having the same types of errors (Uncaught (in promise) TypeError: i is not a function) and finally resolved them by wrapping a data update from within a $watch in $nextTick.
Simplified example:
<div
x-data="{open: false, filter: 'all'}"
x-init="$watch('filter', val => {
$nextTick(() => open = false) // <-- $nextTick wrapper added
})"
>
I ran into a similar problem; adding an id attribute to an element with the x-data attribute did not solve my problem.
After some trial and error, I found the following workaround:
First, remove window.Alpine.initTree(to) from onBeforeElUpdated.
Then, add the phx-hook="AlpineRoot" attribute to the element with the x-data attribute or one of its ancestor elements.
Finally, define the following hook in your app.js:
Hooks.AlpineRoot = {
update() {
window.Alpine.initTree(this.el)
}
}
I hope my experience will be useful to someone.
I’m a big fan of Alpine.js and it’s good to see others getting it to work with LV.
Have you seen this other thread on the topic? There’s some snippets in there that are also useful on working around some of the issues with Alpine: