I raised a previous forum query for an issue where my custom plugin isn’t updating when I make changes. I have now discovered the problem but I have no idea how to fix it.
When I make changes to my plugin index.js, to amend the Panel preview, nothing happens. Similarly, if I update index.css nothing changes. But when I look at Dev Tools for the Panel, I see that the index.js and index.css files being called are actually located in a subfolder of the media folder…
…and those files contain old code that has somehow remained and is overriding the new code that appears earlier in the same files.
Dev Tools says that there are four media subfolders – pages, panel, plugins and site. If I look in the media folder in either VS Code or my file explorer, I only see the pages and site subfolders. Even when I delete the media folder, those subfolders seem to persist in Dev Tools, as do the index.js and index.css files with updated epoch timestamps.
I have tried clearing cache via the Panel and via the browser and I’ve deleted the media folder numerous times. When I look back in Dev Tools, the plugin folder and the ‘rogue’ files are still there.
How do I purge these folders/files to ensure that the Panel is accessing my latest plugin code?
Such files get cached by the browser, do a hard reload, that should clear the cache. Better still, disable caching in the network tab when dev tools are open.
The steps I have tried, numerous times and in different sequences, are…
Disabled cache in the Dev Tools Network tab
Cleared browser cache in the “Clear browsing data…” settings
Used the browser “Empty cache and hard reload”
Emptied cache in the Panel (using oweb’s Clear Cache) plugin
Doubled-checked/emptied the site/cache folder
Deleted the media folder
Did another hard reload
I’ve tried those steps or their equivalents in Chrome, Edge and Firefox but in every browser the media/plugins/index.js and media/plugins/index.css files are there, all with the same timestamp suffix. I even tried in Opera. which I haven’t used for a long time, and the files appear there too.
As well as in my localhost site, it’s also happening in my public-facing test site. And that’s with the same timestamp suffix as well. Not sure how that’s happened!
This is what I see in the Dev Tools Sources tab, even when the media folder is supposed to be empty.
This is what I see in the Styles section – two styling blocks for the button. The new styling (line 1) is superseded by the old version which is for some reason still appearing in the file (line 70).
The button HTML rendered in the Panel is my original <button type="button"></div> code that I have long since updated in my custom block’s index.js. That new button template does appear in the cached media/plugins/index.js but is similarly superseded by the old version which appears later in the same file.
I have looked at the Console and the only message is a ‘warning’ relating to an index.min.js file in the folder media/panel – Plugin is replacing "k-page-view". I’m not sure if that’s relevant or not.
Finally, yes I do only have one version of the plugin installed.
What am I missing? I really can’t figure out how to get rid of those media/plugins cached files. This is the first time I’ve experienced this.
The plugin has always been called button-block but somehow, when I’ve made updates, two versions of JS and CSS – the original and the latest – have made their way into the compiled media/plugins files, which I can’t seem to clear.
I’ve been through all my blueprints to remove any reference to the - button block
I’ve gone to one of the pages with a button and deleted it in the Panel
I’ve taken the same steps as before to clear the cache, delete the media folder, etc.
There is now no sign of a button on that page either in Panel or on the front-end. And yet…
When I look at the Dev Tools Sources tab, the media/plugins/index.js and media/plugins/index.css files are still there, with updated timestamp suffixes.
The latest version of the plugin code has gone from those file but the original stuff is still present. It seems to have got stuck there.
One of the things I had also done was to close down the browser and reopen it. That didn’t work. But I’ve just shut down my computer and restarted it and the media/plugins folder and files have gone. Yay!
I’ll now try reinstalling the button-block plugin and adding the - button blocks back into my blueprints and see what happens.
The lesson is, if the cache isn’t clearing, to restart the computer.
I removed the button-block plugin from the project, restarted my computer and the media/plugins folder and its files had gone. But having reinstalled the plugin and put the - button blocks back into the blueprints, the folder and files are back again.
What’s strange is that it looks like it’s exactly the same index.js and index.css files – the timestamp is the same as before I’d removed the plugin…
1709074741 equates to 22:59 on Tue 27 Feb – last night.
The timestamp that appeared as a filename suffix after I’d removed the plugin was 1709062006. That’s 19:26 last night. In that index.js file, the latest Panel preview code had gone but the original code remained, even in the absence of the plugin. What’s also strange is that I’ve just removed the plugin from my public test site and the same index.js?1709062006 file/timestamp appears.
I thought it might be an issue with my (localhost) machine, so I tried it on another computer and the issue is the same. When I look the public test site’s Panel in the Dev Tools Sources tab, the same index.js?1709062006 and index.css?1709062006 files are present.
If I reinstall the plugin in the public test site, the files revert to the index.js?1709074741 and index.css?1709074741 versions.
The fact that the same timestamped files appear in different environments and different computers must mean that that issue is somewhere inside my plugin code. But…
How can the media/plugins folder be gone and then return with the same ‘old’ files in it?
How can the compiled JS and CSS files keep coming back with two specific timestamps – one for when the plugin is installed and one when it isn’t?
The only files in the plugin are these…
…and I can’t see anything inside the files that suggests what the problem is.
FWIW, I upgraded from Kirby 4.1.0 to 4.1.1 today as well, so the whole kirby folder has been replaced and that had no impact.
Not sure what the (caching?) issue was but I’ve (a) just got a new laptop and (b) rebuilt the button-block from scratch and my problem has been solved.
