Be careful when minifying HTML in Magento2

Most difficult bugs are those bugs that do not cause any errors. One such bug is checkout going blank without any errors. It was very strange. I took an exact copy of the site on my local but checkout would work just fine. It was only on the live site that checkout would go blank without errors. Not even testing replica would have that problem which was on the same server!! It’s an engaging problem. Where do you start debugging?

I always start by looking at page source and logs. Generally, page source might have a notice level error. But logs were clear and page source was as you would expect it to be. Now, I know that checkout is a mainly JavaScript application. So I would expect a big

<script type="text/x-magento-init">
{
    "#checkout":{//a big json}
}
</script>

This is a init script for Magento UI components. This is the full definition of checkout application. This JSON is used to render the checkout page. Because there was no error I expected this JSON to be there and it was! So what’s wrong. The problem certainly is with JavaScript rendering and not server side. The problem just became more engaging and frustrating. Frustrating because there is no JavaScript error so where do I look? At this point, event break points are not very helpful. I left the issue after some struggling, and after a month I stumbled upon knockout comments. At first, it was surprising because I did not know that you could access HTML comments with JavaScript. It hit me! “May be I should check whether my checkout has knockout comments”, I thought. And sure thing, they weren’t there in my checkout. The finding was immensely pleasing. Now I knew the problem. This is what those comments look like:

<!-- ko template: getTemplate() --><!-- /ko -->

This comment is responsible for loading the template file of the component it’s associated with. Checkout is made of such components. Even a drop-down is a component. I know these comments were being stripped off by HTML minification. I turned HTML minification off from Magento2 backend. It did NOT fix the problem. My HTML was still being minified. That’s when I realized Cloud-flare was the culprit. As soon as I turned minification off on Cloud-flare my checkout started working. Later I found that Magento HTML minification does not cause any problems because it understands the importance of knockout comments.

This clarifies why the exact replica of store worked on my local development environment. In summary, turn on Magento2 HTML minification from Store->Configurations->Advanced->Advanced. If you are using a proxy for a content delivery network like CDN or Cloud-flare, make sure HTML minification is off. If you are using some kind of command line tool or some other system to minify stuff, leave HTML out of it. You don’t know what you might break.