@click is not a valid attribute name

[MrYawe]

I would like to use Alpine.js in a Phoenix LiveView application for some very simple interactions like toggling a dropdown.

However in phoenix_live_view.js a setAttr() call is crashing because '@click' is not a valid attribute name.

How to reproduce

var div = document.createElement('div'); 
div.setAttribute("@click", "open = !open");

VM142:2 Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '@click' is not a valid attribute name.
    at <anonymous>:2:5

[SimoTod]

It's the norm in javascript, you would get the same error with any framework if you try to set an attribute containing the character '@' via code using setAttribute.
You can use the extended syntax 'x-on:click' and it should work. The @ syntax it's just a shortname to use directly in your html.

[merijnponzo]

i had the same problem with wordpress and using both acf blocks with JSX for and alpine.
I ended up by replacing @click like @SimoTod says, and also exclude '{' and '}' because this caused the parsing problems in acf

:class="'hidden' == navScroll" x-data="initNav"

Where initNav refers to an external javascript file with the alpine logic you need

[BosNaufal]

If you're working with JSX. The errors seem to come from the JSX parser. We can trick it by using spread object props.

<div x-data="{ isEditing: false }">
  <textarea 
    class="textarea w-full textarea-ghost font-normal"
     {...({"@keyup.esc": "isEditing = false"})}
  ></textarea>
</div>