Entangle in Antlers throws Invalid or unexpected token in console

[johncarter-]

Hey Jonas

Thanks again for this package. I have discovered an issue:

• Use antlers for a component view
• Use Alpine to share state between Alpine and Livewire using @entangle see docs
• See error in console when viewing the component

I guess this due to the use of @ in the template and it breaks something in Antlers, although I'm not sharp enough to know exactly what.

I have made a demo repo that you can clone to see the issue in real life: https://github.com/johncarter-/statamic-antlers-livewire-entangle-error

Sorry I can't fix it.

[jonassiewertsen]

Thanks for your feedback and the repo.

I will take a look at it when I have a little extra time. Does the same error not appear if using Blade?

[johncarter-]

Not at the time I dont think. You can use either component from here https://github.com/johncarter-/statamic-antlers-livewire-entangle-error/tree/main/resources/views/livewire

[jonassiewertsen]

I can confirm this issue only happening with Antlers.

Antlers does output the HTML correctly, but does use the @ to prevent parsing. Not sure if this is causing any problem? https://statamic.dev/antlers#prevent-parsing

Not sure why this error does appear. Do you have any idea @jasonvarga ?

[jasonvarga]

@entangle is a Blade directive. It does whatever it needs to do on the server side.

If you use Antlers, @entangle is going to make it all the way into the DOM and won't do whatever it is Livewire is expecting it to do.

This has nothing to do with the 'prevent parsing' feature of Antlers. That's only for when you're putting the @ before curly braces, like @{{ foo }}.

You'll need to make an Antlers equivalent of the directive. Maybe something like {{ livewire:entangle property="showDropdown" }}

<div x-data="{open: {{ livewire:entangle property="showDropdown" }})}">

[jonassiewertsen]

Thanks @jasonvarga

[jonassiewertsen]

This should be resolved with the last release v2.4.0

Can you confirm this @johncarter- ?