Resolving top-menu Varnish issues

When Varnish is wrongly configured

If you run into the issue:

Uncaught ReferenceError: initHeaderNavigation is not defined

Then check whether the HTML of the topmenu is actually being rendered, or if the source code of your page contains:

<esi:include src="http://[YOUR-DOMAIN]/page_cache/block/esi/blocks/[...]

In that case, Varnish is not configured correctly and you might want to double check The Magento Docs for the right configuration settings and make sure your VCL file is correct (and loaded).

When Blocks are wrongly configured

Any block defined in Layout XML with a ttl value set will be turned into a Varnish ESI include, meaning it will be loaded with a separate request by Varnish.

If the block class you’re using doesn't implement right methods, then the block won’t be rendered.

For instance:

<block name="topmenu" 
       as="topmenu"
       template="Magento_Theme::html/header/topmenu.phtml"
       ttl="3600"
/>

Won’t work, because it will use the default Magento\Framework\View\Element\Template block class.

Requirements for a Varnish-capable block are:

Implement IdentityInterface:
class Topmenu extends Template implements Magento\Framework\DataObject\IdentityInterface {

A public getIdentities() method This should work since the standard Topmenu block class meets those requirements:

<block class="Magento\Theme\Block\Html\Topmenu"
       name="topmenu"
       as="topmenu"
       template="Magento_Theme::html/header/topmenu.phtml"
       ttl="3600"
/>