Using encore_entry_script_tags in both parent and grand child twig template logs to console 2 times

1.2k Views Asked by At

I have parent main_layout.html.twig and inside it something like this:

{% block javascripts %}
    {{ encore_entry_script_tags('main_layout') }}
{% endblock %}
{% block content %}{% endblock %}

We have child user_profile_main_page.html.twig and inside it something like this:

{% extends "main_layout.html.twig" %}
{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('user_profile_main_page') }}
{% endblock %}
{% block content %}
    {{ render_esi(controller('SiteBundle:User/Profile:activeAds')) }}
{% endblock %}

User/Profile:activeAds is rendering user_profile_active_ads.html.twig which contains:

{{ encore_entry_script_tags('user_profile_active_ads') }}

Encore is set up with:

Encore
    .setOutputPath('web/build/')
    .setPublicPath('/build')
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning()
    .addEntry('main_layout', './src/SiteBundle/js/MainLayout.js')
    .addEntry('user_profile_main_page', './src/SiteBundle/js/UserProfileMainPage.js')
    .addEntry('user_profile_active_ads', './src/SiteBundle/js/UserProfileActiveAds.js')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .autoProvidejQuery();

config.yml contains:

framework:
    esi:             { enabled: true }
    fragments:       ~

UserProfileActiveAds.js contains:

$(function () {
    console.log('aaa');
});

When this page is started, 'aaa' is written two times to console.

Html that is created looks like this:

<script src="/build/runtime.672c0058.js?r12513"></script>
<script src="/build/0.cf60d32b.js?r12513"></script>
<script src="/build/1.a39e4c28.js?r12513"></script>
<script src="/build/main_layout.e553e805.js?r12513"></script>

<script src="/build/5.d1d1404c.js?r12513"></script>
<script src="/build/user_profile_main_page.e7b326a8.js?r12513"></script>

<script src="/build/runtime.672c0058.js?r12513"></script>
<script src="/build/0.cf60d32b.js?r12513"></script>
<script src="/build/1.a39e4c28.js?r12513"></script>
<script src="/build/user_profile_active_ads.71f49a75.js?r12513"></script>

That is runtime.672c0058.js?r12513 is included twice in html! I think that is a reason why string is written 2 times to log. console.log('aaa') can only be found once is js files (in /build/user_profile_active_ads.9b477d8d.js?r12513).

When instead of render_esi, I write only render: everything is working as expected - string is once logged to output (and runtime is included only once). But I would like to use render_esi, since user_profile_active_ads.html.twig should not be cached, while it's parent is cached.

How can I fix this problem with double initialization?

0

There are 0 best solutions below