Livewire 3 - Laravel 11 - Tailwind CSS double refresh issue with HMR

[FHoulbreque]

Vite Plugin Version

1.0.6

Laravel Version

11.33.2

Node Version

18.20.4

NPM Version

10.9.0

Operating System

Windows

OS Version

11 (23H2)

Web browser and version

Google Chrome 131.0.6778.86 (Official build) (64 bits)

Running in Sail?

No

Description

While progressing through development of my code (here it's coming from a course on Laracast) I encountered a strange behaviour with HMR:

• When saving any change in the blade file, the page reload as intended
• When changing PHP on the server side, it doesn't reload, which is I think normal as well.
• But when interacting with input with wire:model or not on it, the page reload and reset the state. It doesn't occur every time, it generally occurs when there has been a change either on the blade or the PHP part of a liverwire component.

Steps To Reproduce

• Change a file in a Livewire component
• Observe an unwanted reload of the page while typing in an input field

Reproduction

https://github.com/FHoulbreque/vite-livewire-hmr-bug

[binaryfire]

@FHoulbreque Just curious - do you see storage/framework/views/...... lines in your Vite console output when this happens?

I've hit a similar problem with Filament where field changes sometimes trigger a refresh. And there's always a corresponding line in the console output for a file in view cache directory. No idea why - I don't have any storage paths listed in my vite.config.js refresh paths.

[FHoulbreque]

@binaryfire I thought you could be right, it could be related to the cache. But since I restarted vite with the -d parameter, I haven't had this bug once yet... I'll try to catch it this time.

A part of me thinks it could be related to the background save of files from PHPStorm but it wouldn't be just after I input one character in any field, it would be random, which it isn't. Furthermore I do save manually before I check the changes. As soon as I have a better information about this, I'll post it.

[FHoulbreque]

@binaryfire You were definitely right, it's related to a cached view file:

vite:hmr [file change] resources/views/livewire/article-list.blade.php +3s
20:26:37 [vite] page reload resources/views/livewire/article-list.blade.php
vite:hmr [file change] storage/framework/views/5fbfb808db058f00c0e0945a804c9a94.php +18ms
20:26:37 [vite] page reload storage/framework/views/5fbfb808db058f00c0e0945a804c9a94.php

The load of the view cache only happens when interacting with the page though.

[binaryfire]

@FHoulbreque Thanks for confirming. I just realised ./storage/framework/views/*.php is defined in tailwind.config.js - that's why Vite is monitoring that directory. Maybe Livewire writes to the view cache on the fly for some reason? Hopefully someone who's more familiar with Livewire's internals can comment.

This only seems to have started in the last few weeks. So it might be because of a recent change.

[timacdonald]

This issue is caused by Tailwind.

Tailwind creates a circular dependency which forces Vite to perform a full page reload.

You can test this out by leaving the refresh: true option in the vite.config.js and uncommenting out the ./storage/framework/views/*.php directory from the tailwind.config.js.

This is a known issue in Vite that I'm not sure can really be addressed.

vitejs/vite#9512 (comment)

I'm reasonably sure that @fabio-ivona's Livewire plugin addresses the issues however I've not looked at it myself: https://github.com/defstudio/vite-livewire-plugin

Will close this as this isn't a bug we will address directly for the time being.