jonassiewertsen / statamic-livewire

A Laravel Livewire integration for Statamics antlers engine
88 stars 15 forks source link

Multiple versions of livewire/livewire.js #71

Open mojosef opened 1 day ago

mojosef commented 1 day ago

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

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.

marcorieser commented 1 day ago

There was a bugfix a few hours ago in Statamic core (https://github.com/statamic/cms/pull/10306). Can you upgrade and see if it's already fixed?