Estoy agregando scripts/estilos a mi dom solo cuando es necesario. Pero ahora, más y más bibliotecas están cambiando a módulos es6 y mi técnica actual ya no funciona con estos.

Encontré esto, pero la respuesta es bastante antigua: ¿Cómo funciona la carga diferida de módulos en ES6?

Quiero agregar photoswipe tan pronto como sea necesario (cuando un usuario hace clic en una imagen...) Como aquí: https://photoswipe.com/v5/docs/getting-started/

Traté de cambiar el tipo a "módulo", no ayudó

Código:

 let src = "/scripts/photoswipe-lightbox.esm.js"; await new Promise(function(resolve, reject) { let script = document.createElement('script'); script.src = src; script.type = "module"; script.onload = () => resolve(script); script.onerror = () => reject("Error"); document.head.append(script); }); const lightbox = new PhotoSwipeLightbox({...}); lightbox.init();

//PhotoSwipeLightbox no está definido

Agrega con éxito el archivo de script al dom, pero no puedo crear una instancia de la clase. Por ejemplo, const lightbox = new PhotoSwipeLightbox({...});

Me pregunto cómo podría agregar módulos al dom cuando sea necesario y usarlo como se esperaba. Mi página usa pushState en lugar de hacer solicitudes completas, por lo que tengo que agregarlas dinámicamente, además no quiero cargar mi página con archivos innecesarios.

¿Ideas? Gracias de antemano