I've got a strange issue when using full cacheing strategy in production.
If I clear the static cache, the page loads fine ( as there is not cached file to load yet ). However the generated html has 2 instances of livewire.js inserted. This causes issues with livewire and alpine, and gives me the following errors:
index.js:26 Detected multiple instances of Livewire running
ni @ index.js:26
(anonymous) @ index.js:28
(anonymous) @ index.js:53
index.js:26 Detected multiple instances of Alpine running
ni @ index.js:26
(anonymous) @ index.js:29
(anonymous) @ index.js:53
component.js:8 Uncaught Component already initialized
Here is the code generated at the bottom of the static html files
<script src="/livewire/livewire.min.js?id=923613aa" data-csrf="STATAMIC_CSRF_TOKEN" data-update-uri="/livewire/update" data-navigate-once="true"></script>
<script src="/livewire/livewire.min.js?id=923613aa" data-csrf="STATAMIC_CSRF_TOKEN" data-update-uri="/livewire/update" data-navigate-once="true"></script>
<script type="text/javascript">(function() {
var els = document.getElementsByClassName('nocache');
var map = {};
for (var i = 0; i < els.length; i++) {
var section = els[i].getAttribute('data-nocache');
map[section] = els[i];
}
fetch('/!/nocache', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
url: window.location.href.split('#')[0],
sections: Object.keys(map)
})
})
.then((response) => response.json())
.then((data) => {
const regions = data.regions;
for (var key in regions) {
if (map[key]) map[key].outerHTML = regions[key];
}
for (const input of document.querySelectorAll('input[value="STATAMIC_CSRF_TOKEN"]')) {
input.value = data.csrf;
}
for (const meta of document.querySelectorAll('meta[content="STATAMIC_CSRF_TOKEN"]')) {
meta.content = data.csrf;
}
for (const input of document.querySelectorAll('script[data-csrf="STATAMIC_CSRF_TOKEN"]')) {
input.setAttribute('data-csrf', data.csrf);
}
if (window.hasOwnProperty('livewire_token')) {
window.livewire_token = data.csrf
}
if (window.hasOwnProperty('livewireScriptConfig')) {
window.livewireScriptConfig.csrf = data.csrf
}
document.dispatchEvent(new CustomEvent('statamic:nocache.replaced', { detail: data }));
});
})();</script></body>
</html>
My current config:
Environment
Application Name:
Laravel Version: 10.48.22
PHP Version: 8.2.5
Composer Version: 2.7.9
Environment: production
Debug Mode: OFF
URL:
Maintenance Mode: OFF
Cache
Config: CACHED
Events: NOT CACHED
Routes: CACHED
Views: CACHED
Drivers
Broadcasting: log
Cache: file
Database: mysql
Logs: stack / single
Mail: mailgun
Queue: sync
Session: file
Livewire
Livewire: v3.5.8
Statamic
Addons: 3
Sites: 1
Stache Watcher: Disabled
Static Caching: full
Version: 5.26.0 PRO
I've got a strange issue when using full cacheing strategy in production.
If I clear the static cache, the page loads fine ( as there is not cached file to load yet ). However the generated html has 2 instances of livewire.js inserted. This causes issues with livewire and alpine, and gives me the following errors:
index.js:26 Detected multiple instances of Livewire running ni @ index.js:26 (anonymous) @ index.js:28 (anonymous) @ index.js:53 index.js:26 Detected multiple instances of Alpine running ni @ index.js:26 (anonymous) @ index.js:29 (anonymous) @ index.js:53 component.js:8 Uncaught Component already initialized
Here is the code generated at the bottom of the static html files
My current config:
Environment Application Name: Laravel Version: 10.48.22 PHP Version: 8.2.5 Composer Version: 2.7.9 Environment: production Debug Mode: OFF URL: Maintenance Mode: OFF
Cache Config: CACHED Events: NOT CACHED Routes: CACHED Views: CACHED
Drivers Broadcasting: log Cache: file Database: mysql Logs: stack / single Mail: mailgun Queue: sync Session: file
Livewire Livewire: v3.5.8
Statamic Addons: 3 Sites: 1 Stache Watcher: Disabled Static Caching: full Version: 5.26.0 PRO
Statamic Addons jonassiewertsen/statamic-livewire: 3.8.0 spatie/statamic-responsive-images: 5.0.1 withcandour/aardvark-seo: 5.0.0
Any help would be appreciated.