Photoswipe: Import with ES6 and NPM / node_modules

[rnnyrk]

Hi there,

I've want to import the PhotoSwipe library with NPM.

If installed trough npm i photoswipe -S as mentioned in https://www.npmjs.com/package/photoswipe.
I didn't run any grunt tasks, because I saw the dist map isn't empty.

I'm only using vanilla JS so my code is as following:

import 'photoswipe';

const galleryElem = document.querySelector('.gallery');

if (typeof(galleryElem) !== 'undefined' && galleryElem !== null) {
    const imgArray = [];
    const galleryImgs = document.querySelectorAll('.gallery__image');

    // Fill imgArray trough looping.. (skipped for this post)

    const gallery = new window.PhotoSwipe(galleryElem, false, imgArray);
    gallery.init();
}

But unfortunately I get the error:
TypeError: window.PhotoSwipe is not a constructor

Importing as import * as PhotoSwipe from 'photoswipe'; results in the same error.

I've also tried importing the libraries as found in the following code https://gist.github.com/di5abled/d8d84af3be5e1bf12507

But then I get the error: Cannot find module..

All my JS files are bundled in a file called app.js loaded in the footer.

So I'm not sure how to import the library and use it correctly.
Thanks in advance for any help.

[nicooprat]

You should import it like this: import PhotoSwipe from 'photoswipe'. The PhotoSwipe will be scoped to this file, so window.PhotoSwipe won't exist. For debugging purpose you could add this line: window.PhotoSwipe = PhotoSwipe though.

Importing with import * as PhotoSwipe from 'photoswipe' would suggest that the package has many exports, which is not the case here.

[nicooprat]

You'll also have to import the default UI class: import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default'

[milmaj]

for me works:

import * as PhotoSwipe from 'photoswipe'
import * as PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default'

[the94air]

@milmaj perfect!!. Thanks.

[dangelion]

This works, for me:

import PhotoSwipe from 'photoswipe';
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default'