¿Son normales 2 scripts de carga en Livewire?

Livewire es una herramienta poderosa para construir interfaces interactivas en aplicaciones Laravel, pero a veces los desarrolladores pueden enfrentarse a problemas inesperados. Uno de estos problemas comunes es la aparición de dos scripts de carga idénticos en la cabecera y en la parte inferior del cuerpo de la página. Este artículo abordará esta inquietud y proporcionará una solución.

Entendiendo el problema de los scripts duplicados

Cuando comienzas a trabajar con Livewire y decides cargarlo manualmente, es posible que te encuentres con un comportamiento extraño donde el mismo script se inyecta en dos partes de tu documento HTML. Esto puede causar confusión y preguntas sobre la normalidad de esta situación.

El script en cuestión es el siguiente:

window.addEventListener('load', () => window.setTimeout(() => {
   const makeLink = (asset) => {
       const link = document.createElement('link');
       Object.keys(asset).forEach((attribute) => {
           link.setAttribute(attribute, asset[attribute]);
       });
       return link;
   }
   const fragment = new DocumentFragment;
   [].forEach((asset) => fragment.append(makeLink(asset)));
   document.head.append(fragment);
}));

Cargando Livewire correctamente

Es crucial verificar que estás importando Livewire de la manera correcta en tu archivo bootstrap.js. Aquí está la forma en que deberías importarlo:

import { Livewire, Alpine } from '../../../../vendor/livewire/livewire/dist/livewire.esm.js';

window.Livewire = Livewire;
window.Alpine = Alpine;

Además, en tu configuración de Vite (vite.config.js), asegúrate de que estás resolviendo Livewire adecuadamente:

resolve: {
    alias: {
        livewire: path.resolve(__dirname, 'vendor/livewire/livewire/dist/livewire.esm.js')
    }
},

También es importante verificar cómo estás dividiendo los chunks. Por ejemplo, si estás chunking Livewire en el chunk core:

manualChunks: {
   "core": ["axios", "livewire"],
   "vendor": ["bootstrap"],
   "charts": ["d3"]
},

Solución al problema de los scripts duplicados

Si te enfrentas a los scripts duplicados, lo primero que debes hacer es comprobar si hay un conflicto en la configuración de Vite o si Livewire se está inicializando más de una vez. Un enfoque común para resolver este problema es:

Revisar el código de inclusión: Asegúrate de que no estás incluyendo Livewire en tu vista de Laravel y al mismo tiempo lo estás cargando manualmente en tu JavaScript.
Limitar las instancias: A veces, es útil agregar un mecanismo de control simple para garantizar que el script solo se cargue una vez. Puedes hacer esto envolviendo tu script en una verificación que confirme si ya ha sido cargado.
Verificar dependencias externas: Revisa si alguna otra librería o componente que estés utilizando está creando una nueva instancia de Livewire o insertando el script nuevamente.

Conclusión

En resumen, encontrar dos scripts de carga de Livewire en tu proyecto no es el comportamiento esperado y puede ser un indicio de una configuración incorrecta. Al seguir las pautas mencionadas y revisar tu código, deberías ser capaz de resolver este inconveniente. No dudes en buscar más ayuda en la comunidad si el problema persiste, ya que podrías estar enfrentando un caso específico que requiera atención adicional.

¿Son normales 2 scripts de carga en Livewire?