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.

--

--

--

Dive deep into the amazing world of e-commerce. Explore different aspects of the Magento universe with opinions, news roundups and tutorials with us.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhishek Jakhotiya

Abhishek Jakhotiya

just a bug hunter and problem addict

More from Medium

Soups Are Like Friends, Not Food

Lower Bound Theory

Last Mile Education Fund just surprised 22 tech graduates by paying their student debt. Here’s why.

Why lacking confidence is not really imposter syndrome.