Asset Manager can't load .esm Modules

[wernerjoss]

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.

[rhukster]

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

[wernerjoss]

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

`

<script type="module"> import PhotoSwipeLightbox from 'https://unpkg.com/[email protected]/dist/photoswipe-lightbox.esm.js'; import PhotoSwipe from 'https://unpkg.com/[email protected]/dist/photoswipe.esm.js'; import PhotoSwipeSlideshow from 'https://cdn.jsdelivr.net/gh/htmltiger/photoswipe-slideshow/photoswipe-slideshow.esm.min.js'; const lightbox = new PhotoSwipeLightbox({ gallery: '#photoswipe-gallery-id', pswpModule: PhotoSwipe, children: 'a'}); const slideshowPlugin = new PhotoSwipeSlideshow(lightbox,6); // statt 4 sec lightbox.init(); </script>

`
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.