Search code examples
symfonycloudflarewebpack-encore

Encore script tag and clouflare rocket loader attribute

I'm working on a Symfony 6.1 project and I'd need to add a custom attribute to one of my script tag generated by Encore in Twig, BEFORE the "src" attribute.

Here is the twig code:

{{ encore_entry_script_tags('js/theme-toggle', attributes={
    'data-cfasync': 'false'
}) }}

The generated HTML is the following:

<script src="/build/js/theme-toggle.5533f58c.js" defer data-cfasync="false">

Is there a way to make it appear before the "src" tag instead of after?

I really need it to disable CloudFlare "Rocket Loader" on this specific script: https://support.cloudflare.com/hc/en-us/articles/200168056-Understanding-Rocket-Loader

Otherwise Rocket Loader breaks the page, and I don't really want to disable it for the whole page either.

Solution

  • You could use encore_entry_js_files() twig function to get the list of JS files and add the HTML by hand.

    {% for js_file in encore_entry_js_files('js/theme-toggle') %}
    <script defer data-cfasync="false" src="{{ js_file }}">
{% endfor %}

    From the symfony/webpack-encore-bundle documentation:

    If you want more control, you can use the encore_entry_js_files() and encore_entry_css_files() methods to get the list of files needed, then loop and create the script and link tags manually.