[6.x] Assets browser in a refresh loop when running `dev` and having CP js/css
Bug description
Content warning: flickering in video
Oh another fun one that is odd to replicate.
When running rpm run dev on a site which has CP assets (i.e. a Bard addon, CP css, etc), when you visit Assets, you can be stuck in a refresh loop.
https://github.com/user-attachments/assets/ba374f05-b5ef-4097-96e3-4f2725776f1f
If you run npm run build, the issue is not present.
If you browse the Assets (after build), and then re-run dev, the issue is not present.
If you re-run dev, then save an Entry, the issue comes back.
It is like something is updating something else that is being watched which is triggering the refresh on loop - perhaps the Stache and asset metadata or something of the like?
I've got two Statamic 6 sites set up, one exhibits the behaviour with these steps reliably, the other doesn't.
For the one that doesn't, I've got our "Logger" addon installed, and can see that when I load Assets, every time, I get an event that the User is saved. Could it be that Assets loads, saves the user, but then the file watcher sees the user change so Vite causes a refresh?
How to reproduce
- Statamic 6 a17
- Add some CP resources (such as a Bard addon, CP css, etc)
- Run
npm run devand ensure the CP is loading correctly - Add some Assets to your container
- Create an Entry, and Save
- Go to Assets in the side nav
This can start the refresh loop.
Logs
Environment
Statamic 6 a17
Of note:
Stache Watcher: Enabled (auto)
Installation
Fresh statamic/statamic site via CLI
Additional details
No response
I've just had this happen on a Collection too - not just Assets.
Same behaviour though: constant reloading: changing to npm run build gets it working again, until it occurs next time.
Which addons do you have installed? Can you try uninstalling them one by one?
I wonder if something is throwing off the Vite watcher 🤔
And this morning I'm struggling to re-create it at all... stay tuned on this one and will update you as I work on it more.
It has re-occured today, and running php please stache:refresh resolves it instantly, and then I struggle to get it to happen again.
The addons installed are
mitydigital/feedamic: 3.0.6
mitydigital/iconamic: 3.0.0
mitydigital/sitemapamic: 3.4.1
mitydigital/statamic-form-submission-cleaner: 1.1.0
mitydigital/statamic-google-fonts: 2.1.0
mitydigital/statamic-scheduled-cache-invalidator: 2.2.1
mitydigital/supportamic: 1.3.2
So here's another hint or clue.
I have two tabs open - one in the CP, and one for the public site.
I have npm run dev running.
Even clicking around the CP is triggering reloads on the front end.
You can see in this video that when I navigate around through the Collections, the tab (on the front end) is being reloaded.
Browsing other areas - Taxonomies, Assets, etc - does not cause this to happen.
While this isn't the infinite loop issue originally reported, it is odd that even browsing in the CP is triggering a refresh on the front end through vite.
https://github.com/user-attachments/assets/6688b2b7-0c11-4caa-92da-b4a94d18cb97
That's so weird... we haven't seen any issues like this during development so it must be something setup related (with addons, the site). 🤔
I don't suppose you'd be able to provide a fresh Statamic site where you can reproduce the issue?
I haven't been able to replicate this in a fresh site - and it's a hard one to replicate as it is not all the time on every page refresh.
It's definitely an odd one.
Not sure if it matters, but this site is also in Blade, not Antlers. Not sure if that provides any further insight?
I've just had this happen again for my site after saving an Entry while npm run dev is running, and had this output:
I've been editing entries, and it has all been good. Then I can travel to another Entry or Assets or somewhere else, and this appears in the Vite window, and the refresh loop happens again and again.
I still can't provide reliable steps to faithfully replicate it... but the common thread is when this file changes.
Oh, that's helpful. Feels like we're getting closer 😄
Where are you running npm run dev? In a project, in an addon, in core? What does your vite.config.js look like?
Looks like your vite is watching more than it should be. Could you share the config file?
vite.config.js:
import laravel from 'laravel-vite-plugin'
import {defineConfig} from 'vite'
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/cp.css',
'resources/js/cp.js',
'resources/css/site.css',
'resources/js/site.js',
],
refresh: true,
detectTls: false
}),
],
});
My site.css has these:
@source '../**/*.antlers.html';
@source '../**/*.blade.php';
@source '../**/*.html';
@source '../**/*.js';
@source '../**/*.php';
@source '../**/*.vue';
But I'm not watching for any json file changes.
This is from a config from a Statamic 5 site - which we have used as the base for all of our sites - and haven't experienced this with Statamic 5.
This refresh issue has only started midway through the Statamic 6 Alpha releases.
I can see two things:
- perhaps the
@sourcecalls in my css is being too aggressive and vague (yet still not looking atjsonfiles so maybe not that), or - a new vanilla Statamic 5 install that I then upgraded to Statamic 6, there is a slightly different
vite.config.jsfile with an ignored section when watching (see below)
server: {
watch: {
ignored: ['**/storage/framework/views/**'],
},
},
Has something changed regarding the cp.json between 5 and 6? We have dozens of v5 sites with the same config and have not experienced this with v5. The current site I've been working on throughout the Alpha of v6, and it was around the Inertia time (ish... can't remember the exact Alpha version) where this started to occur.