Problem updating vs 5.1.2 to 5.22

[acwolff]

I made in the past this album with beta version 5.1.2 The PhotoSwipe modules photoswipe-lightbox.esm.min.js, photoswipe.esm.min.js and photoswipe.css are in a subdirectory named 'res' (https://andrewolff.jalbum.net/PS_JustifiedGallery_white/res/)

I used this code:

import PhotoSwipeLightbox from './res/photoswipe-lightbox.esm.min.js'; 
const options = { 
  ...
  pswpModule: './photoswipe.esm.min.js' 
    }; 
const lightbox = new PhotoSwipeLightbox(options);

I like now to use version 5.2.2 so I replaced in my res subdirectory the files photoswipe-lightbox.esm.min.js, photoswipe.esm.min.js and photoswipe.css by the new v5.2.2 files.

In the options I changed the pswpModule option as indicated in the documentation:

pswpModule: () => import('./photoswipe.esm.js')  // this is line 699

The new modules does not work in my case, the console reports:

index.html:699

      GET http://127.0.0.1:8080/PS__JustifiedGallery_white_vs5.2.2/photoswipe.esm.js net::ERR_ABORTED 404 (Not Found)

pswpModule @ index.html:699 preload @ photoswipe-lightbox.esm.min.js:5 loadAndOpen @ photoswipe-lightbox.esm.min.js:5 onThumbnailsClick @ photoswipe-lightbox.esm.min.js:5 index.html:1

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://127.0.0.1:8080/PS__JustifiedGallery_white_vs5.2.2/photoswipe.esm.js

What should I change in my code to use the 3 modules in my res folder?

My application , see https://jalbum.net/nl/skins/skin/PhotoSwipe, requires that all PhotoSwipe modules should be in the subdirectory 'res'

[dimsemenov]

The path to the module is not correct. In your case it probably should be pswpModule: () => import('./res/photoswipe.esm.js')

[acwolff]

The path to the module is not correct. In your case it probably should be pswpModule: () => import('./res/photoswipe.esm.js')

No that does not work either, I get: photoswipe.esm.js:1

   Failed to load resource: the server responded with a status of 404 (Not Found)

index.html:1

      Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://127.0.0.1:8080/PS__JustifiedGallery_white_vs5.2.2/res/photoswipe.esm.js

Why is the old construction

pswpModule: './photoswipe.esm.min.js'

no longer possible? That did work fine!

[dimsemenov]

The error tells you what URL it's trying to fetch, make sure that the path is correct or define an absolute URL.

Why is the old construction pswpModule: './photoswipe.esm.min.js' no longer possible?

The old version of the Lightbox module had an import(pswpModule) inside, which made the module path relative to the lightbox JS file, that's why the path is different.

It was changed because some bundlers weren't able to parse dynamic import within the lib.

[acwolff]

Sorry, I made a stupid mistake: I did import photoswipe.esm.js but it should be photoswipe.esm.min.js, This works: pswpModule: () => import('./res/photoswipe.esm.min.js')

@dimsemenov thanks for your fast response and of course for your awsome library. I hope you and your family stay safe!
We stand with Ukraine