Alpinejs and arrow functions

bud
#1

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:

#2

Post your code

#3
#4

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)
#5