Alpinejs and arrow functions


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 :frowning:

Post your code


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;

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 :slight_smile:

having similar issue.


<div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
    <button @click="open = ! open">Toggle Open</button>

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

1 Like