grav icon indicating copy to clipboard operation
grav copied to clipboard

Asset Manager can't load .esm Modules

Open wernerjoss opened this issue 2 years ago • 2 comments

I just stumbled over a Problem with Javascript esm Module loading via Asset Manager as described in the docs - it turned out that it looks like being impossible to do this. my example was photoswipe slideshow, which is only provided as an esm Module. I tried with several Options (loading...) but none worked. So, I guess, this is a feature request.

wernerjoss avatar Dec 30 '23 08:12 wernerjoss

Can you provide an example of the twig you are using and what you expect the output to be?

rhukster avatar Jan 05 '24 11:01 rhukster

yes, sure - in twig, I can load the desired esm Modules like so:

`

` which seems to work, if used in a theme's base.html.twig, as it is just pure html. my intention, however, is to load these in a plugin (PhotoswipeExtension.php), like so:

` sprintf('import PhotoSwipeLightbox from "https://unpkg.com/[email protected]/dist/photoswipe-lightbox.esm.js";'),

sprintf('import PhotoSwipe from "https://unpkg.com/[email protected]/dist/photoswipe.esm.js";'),

sprintf('import PhotoSwipeSlideshow from "https://cdn.jsdelivr.net/gh/htmltiger/photoswipe-slideshow/photoswipe-slideshow.esm.min.js";'),

sprintf('const lightbox = new PhotoSwipeLightbox({ gallery: "#photoswipe-gallery-id", pswpModule: PhotoSwipe, children: "a"});'),

sprintf('const slideshowPlugin = new PhotoSwipeSlideshow(lightbox,6);'),

sprintf('lightbox.init();'),

` but this simply does nothing, no modules loaded visible in debugger. same happens when I copy the modules from upkg to local file system and try to load from there.

I also tried to add the modules via $this->grav['assets']->addJsModule(...) which I expected to do just that: load a javascript (esm) module and $this->grav['assets']->addJs(...) with the same result: nothing loaded.

wernerjoss avatar Jan 05 '24 11:01 wernerjoss