Alpine.js doesn't work with Phoenix 1.6.2 because of too low esbuild target

[dsincl12]

Environment

• Elixir version (elixir -v): 1.12.3
• Phoenix version (mix deps): 1.6.2
• Operating system: WSL Ubuntu 20.04 or Windows 11

Expected behavior

Alpine functioning properly

Actual behavior

module.esm.js:1635 Alpine Expression Error: msg is not defined

Expression: "msg"

<p x-data=​"{msg:​ 'Alpine works!'}​" x-text=​"msg">​Alpine does not work :(​</p>​

After spending a day with this issue I finally figured out why it didn't work. Alpine.js doesn't work because of the low target version for esbuild (--target=es2016) in config.exs. Bumping the target to es2018 makes everything work like a charm :)

[derpycoder]

I faced the same issue today, you are a lifesaver.

Thank you so much.

P.S. I wish Petal stack was a standard and would work out of the box, without so many setups.

[alaadahmed]

still doesn't work even after bump --target=es2018 as mentioned. It was working actually before updating phoenix :(

<div x-data="{msg: 'Alpine works!'}">
  <span x-text="msg">Alpine does not work</span>
</div>

[slashdotdash]

It took me a couple of hours to track down the root cause of the following AlpineJS v3.5.0 error:

Alpine Expression Error: func(...).catch is not a function

Expression: "{ isOpen: true }"

<div x-data="{ isOpen: true }">

The default esbuild configuration created by Phoenix 1.6.2 in config/config.exs, as below, uses es2016 as the target.

config :esbuild,
  version: "0.12.18",
  default: [
    args: ~w(js/app.js --bundle --target=es2016 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

This doesn't work with Alpine v3 as it requires support for async/await which is in ECMAScript 2017 (see #2318).

Changing the target to es2017 fixes Alpine with Phoenix for me:

config :esbuild,
  version: "0.12.18",
  default: [
    args: ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

[cseeger]

@slashdotdash, just curious - why es2017 and not es2018 as described by @dsincl12?

[slashdotdash]

@slashdotdash, just curious - why es2017 and not es2018 as described by @dsincl12?

To allow support for slightly older browsers.

[dongennl]

Thank you so much. A whole morning....