Alpine.js and Blade/ACF-composer

sage
, ,
11

I went through this a year ago, it has to do with ACF’s parsing of the view when using JSX, nothing to do with Acorn. To fix you need to wrap anything with “illegal” characters with esc_attr when enabling JSX. Or move the JS to a file and just call the function from x-data, x-init, etc.

<div class="{{ $block->classes }}" 
  x-data="{topmargin: 0}" x-init="<?= esc_attr('topmargin=(1 < 2 ? 1 : 2)') ?>"
>
3 Likes