# Alpinejs and arrow functions

**URL:** https://discourse.roots.io/t/alpinejs-and-arrow-functions/24647
**Category:** bud
**Tags:** sage10
**Created:** 2023-01-25T16:01:25Z
**Posts:** 9

## Post 1 by @SergiArias — 2023-01-25T16:01:25Z

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

---

## Post 2 by @ben — 2023-01-25T16:07:10Z

[**Post your code**](https://discourse.roots.io/t/how-to-best-ask-questions-on-this-forum/24582)

---

## Post 3 by @ben — 2023-01-25T16:07:16Z



---

## Post 4 by @SergiArias — 2023-01-25T16:32:08Z

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)
```

---

## Post 5 by @ben — 2023-01-25T16:49:58Z



---

## Post 6 by @SergiArias — 2023-02-02T21:27:19Z

Now this is working with Sage 10.5 and bud 6.8 :slight_smile:

---

## Post 7 by @chrillep — 2023-06-12T15:22:06Z

having similar issue.

example  
[https://alpinejs.dev/magics/watch](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>
```

 ![Skärmavbild 2023-06-12 kl. 17.21.47](https://discourse.roots.io/uploads/default/original/2X/b/b0546c34deeaf1511039dede248cd4066daa231b.png)

---

## Post 8 by @SergiArias — 2023-06-12T20:24:50Z

Hi! It’s a problem with ACF, still open though. There is a workaround using html entities instead. Take a look [here](https://github.com/Log1x/acf-composer/issues/160).

---

## Post 9 by @cim — 2023-06-12T22:00:05Z

I had a similar problem using `>` With the alternative solution to use `esc_attr`

> [@Alpine.js and Blade/ACF-composer](https://discourse.roots.io/t/alpine-js-and-blade-acf-composer/23756):
>
> Is it possible and/or good practice to use Alpine.js in Blade templates for ACF Blocks (made with ACF Composer)? I used Alpine.js in normal Blade templates before, but using it Blade templates for ACF blocks is giving me a lot of troubles so far Here is one example: This works: \<div x-screen="topmargin = Math.floor((( $width \< 1400 ? $width : 1400 ) / Math.sin(85.8 \* Math.PI/180)) \* (Math.sin(4.2 \* Math.PI/180)))"\> But if I use $width \> instead of $width \< the parser chokes on it. Also got…