Table of Contents & Menu
On this page
Navigation

Troubleshooting Top Menu Varnish Issues

Varnish Misconfiguration

If you encounter this error:

Uncaught ReferenceError: initHeaderNavigation is not defined

Check if the top menu HTML is rendered. If your page source contains:

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

If so, Varnish is misconfigured. Double-check The Magento Docs for correct settings and ensure your VCL file is correct and loaded.

Block Misconfiguration

Note for Hyvä Themes (1.1.8 and older)

Since Hyvä 1.1.9, view models implementing the IdentityInterface supply ESI block cache tags. Prior to 1.1.9, ESI cache tags were supplied by the block class, as described below.

For more details, refer to the view model cache tags documentation.

Blocks defined in Layout XML with a ttl value become Varnish ESI includes, loaded via separate Varnish requests.

If the block class lacks the required methods, the block will not render.

Example:

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

This won't work, as it uses the default Magento\Framework\View\Element\Template block class.

For a block to be Varnish-capable, it must:

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

  2. Have a public getIdentities() method. The standard Topmenu block class meets these requirements: 

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

Intermittent Top Menu Style Issues

If you see an <esi:include> tag when inspecting the page source, this issue may occur.

This often occurs when Varnish full-page caching is combined with Brotli compression.

Disable Brotli compression to resolve this.

On Hypernode, modify the varnish.webroot.conf file.