v5-beta - Not clear how to install and import Photoswipe

[dangelion]

Hi @dimsemenov , as a premise, thanks for your incredible work! Really.

I work in a classic Webpack environment so I install libraries launching:

npm install swiper

then I import libraries in my app.js like:

import Swiper, {Navigation} from 'swiper';

and CSS in my app.scss like:

@import "~swiper/swiper";

getting automatically it from the node_modules folder.

Note: I can't put an absolute path as show in docs because I install it via npm:

pswpModule: '/v5/photoswipe/photoswipe.esm.js' //<== Can't do something like https://mysite.com/photoswipe.esm.js

If only solution is import all modules at start that's not a problem to me, but I don't understand how to do that.

Any help is really welcome cause I'm currently stuck to use it :(
Thanks

[dimsemenov]

You can install the beta like this npm i--save git://github.com/dimsemenov/photoswipe#v5-beta.

Then you'll be able to do:

import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js';
const options = {
  gallerySelector: '#my-gallery',
  pswpModule: 'https://example.com/photoswipe.esm.js'
};
const lightbox = new PhotoSwipeLightbox(options);
lightbox.init();

and import CSS with something like import 'photoswipe/dist/photoswipe.css'.

Please note that non-dynamic import of pswpModule isn't supported yet, but it's something that I or some contributor will implement. The code is here https://github.com/dimsemenov/PhotoSwipe/blob/v5-beta/src/js/lightbox/lightbox.js#L146 if you got some ideas on how to improve.

For now, if you use something like webpack - you may create multiple outputs, so your pswpModule has a real path.

Default pswpModule is located at dist/photoswipe.esm.js.

[dangelion]

Yes @dimsemenov
already tried exactly what you suggest, but when I click an image I get error in console

Uncaught (in promise) Error: Cannot find module 'http://my-project.test/wp-content/themes/mytheme/public/photoswipe-v5/dist/photoswipe.esm.min.js'
    at app.js?id=6d8dbee816224d2b6c2a:208

Already check to open that absolute URL in the browser and it finds the file...

[dimsemenov]

It seems the error is added by the webpack when photoswipe-lightbox.esm.js is getting transpiled, since webpack is trying to override the default behavior of import().

Changing import(module); to import(/* webpackIgnore: true */ module); does help, but it doesn't look like an ideal fix as other bundlers might have a similar issue.

I'm not sure what to do with it yet and how to make bundlers ignore dynamic import (aside from completely disabling the feature). possibly with polyfill https://github.com/GoogleChromeLabs/dynamic-import-polyfill

[dangelion]

Thanks @dimsemenov What should be the correct syntax to import Photoswipe with import() in that way? Tried various but without luck:

import(/* webpackIgnore: true */ 'photoswipe/dist/photoswipe-lightbox.esm.js');
import(/* webpackIgnore: true */ PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js');
import(/* webpackIgnore: true */ PhotoSwipeLightbox);

All I get is
Uncaught (in promise) TypeError: Failed to resolve module specifier 'photoswipe/dist/photoswipe-lightbox.esm.js'
Uncaught ReferenceError: PhotoSwipeLightbox is not defined.

I'm not sure what to do with it yet and how to make bundlers ignore dynamic import (aside from completely disabling the feature)

For now to me it could be ok to completely disabling the feature. Is it just a matter of a little performance worsening?

[dimsemenov]

should now be fixed by #1764 (comment), so closing.

[dangelion]

@dimsemenov Almost there! There's a Warning while building, check here #1764 (comment)

[multipliedtwice]

@dimsemenov not solved I think. In sveltekit breaks dev right away.