Livewire errors on Cloudflare?

On a recent project we encountered some very strange and difficult to investigate bugs on our Livewire enabled web application. The app would load as expected, but after some user interaction JavaScript errors would appear (notably Alpine Expression Error: Can't find variable: show) and the application would become unusable.

Luckily we were able to find some other bug reports which helped us to identify the root cause.

If you're using Laravel Livewire and have enabled HTML minification on Cloudflare, you'll encounter the same issue. This is because HTML minification strips out HTML comments, which Livewire uses to store metadata in order to manage and update the DOM state between requests. When Cloudflare's HTML minification removes these comments, Livewire loses the necessary information to correctly update the DOM, resulting in errors when the server state needs to be synchronised with the frontend.

To resolve the issue in our case, we simply disabled HTML minification entirely, which led to the bugs instantly being resolved. HTML minification provided minimal performance impact in our particular use-case, so we didn't bother implementing it outside of Cloudflare (e.g: at the application layer or via the reverse proxy).

Another option is to explicitly exclude Livewire-related URLs or subdomains from HTML minification. If you want to keep HTML minification enabled on Cloudflare, you can configure Cloudflare to exclude Livewire-related URLs from the minification process. This ensures that the necessary HTML comments are retained for Livewire to work correctly, but obviously involves some more configuration (and is not possible if your entire site relies on Livewire).

---