Magento2: Wrong Varnish Cache Settings are killing Burger Menu

[bka]

When using Varnish as a Full Page Cache and your connection settings are wrong, the burger menu stops working. I don't understand this behavior at all, because everything else is working fine. It happend because we imported a database dump from production to our local dev machines. It was very confusing and hard to track down but I don't understand the reason for this at all. Does somebody have a reasonable explanation for this?

Preconditions

1. Tested on Magento 2.1

   Steps to reproduce

2. Activate Varnish Cache under Stores -> Configuration -> System -> Full Page Cache

3. Set a random IP .e.g 12.13.14.15
4. Flush Cache
5. Navigate to storefront

Expected result

1. Burger Menu for mobile theme is clickable

   Actual result

2. Burger Menu for mobile theme is not working anymore

[boldhedgehog]

@bka This form's purpose is to generate a configuration file for Varnish, those fields are not the actual Varnish configuration for Magento. As far as I know, the only way to configure Varnish connection is to add the configuration to etc/env.php file like this:

'http_cache_hosts' =>
  array (
    0 =>
    array (
      'host' => 'varnish', // Varnish instance address
      'port' => '6081',
    ),
  ),

[bka]

@boldhedgehog Thanks, I'm aware of this and thats why I'm wondering why this setting seems to have influence on the burger menu - it just doesn't expand anymore. Did not have time to dive deeper into this.

[bka]

I understand this problem a little better now. Chaning _Full Page Cache_ to Varnish instructs to Magento to replace some blocks with ESI tags. Because the Topmenu block is declared with ttl like this:

<block class="Magento\Theme\Block\Html\Topmenu" name="catalog.topnav" template="html/topmenu.phtml" ttl="3600" before="-"/>

it is replaced by an ESI tag. The data-mage-init block for the menu is inside this template making the burger menu not working anymore.

Not really a bug. Makes sense and it only happend because we imported a database dump from production. Would be nice to have some warning in developer mode to prevent me doing this mistake again ;)

[benheart]

@bka Hi bka, I had the same problem as you mention above. And I solved the problem by remove ttl="3600", but I also noticed that in the pure Magento2.1.5, ttl="3600" is still exist in the file: vendor/magento/module-theme/view/frontend/layout/default.xml. So I don't understand why "it only happend because we imported a database dump from production." as you wrote above.