Hi!
I am using alpinejs to sometimes code directly on html when things are small and simple. I noticed that if I use an arrow function the console gives me an error (async function) and stops executing code, but it works if I use a regular function.
I think it’s something in the webpack config (I am importing alpinejs as vendor).
Of course, arrow functions work as expected when inside the js or a script tag.
I didn’t find anything on the alpinejs or webpack github though 
Sure
in the HTML:
<div x-data="{
init() {
const array = [4,3,2,1];
array.forEach((item,index) => {
array[index] = array[array.length - index - 1];
array[array.length - index - 1] = item;
});
console.log(array);
}
}"></div>
in app.js
import Alpine from 'alpinejs';
in package.json
"dependencies": {
"alpinejs": "^3.10.5",
}
And the error is:
Uncaught SyntaxError: Invalid or unexpected token
at new AsyncFunction (<anonymous>)
at 705.239c6c.js:2:4888
at 705.239c6c.js:2:5046
at 705.239c6c.js:2:5065
at W (705.239c6c.js:2:5358)
at H (705.239c6c.js:2:4470)
at V (705.239c6c.js:2:4425)
at 705.239c6c.js:2:34135
at Function.<anonymous> (705.239c6c.js:2:14737)
at s (705.239c6c.js:2:8877)
Now this is working with Sage 10.5 and bud 6.8 
having similar issue.
example
https://alpinejs.dev/magics/watch
<div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
<button @click="open = ! open">Toggle Open</button>
</div>
Hi! It’s a problem with ACF, still open though. There is a workaround using html entities instead. Take a look here.
I had a similar problem using > With the alternative solution to use esc_attr
