How to import and use PhotoSwipe with Aurelia / Typescript?

Question

I am trying to use PhotoSwipe in an Aurelia project, but cannot find a way to make it work.

In my aurelio.json under bundles, I have:

{
    "name": "photoswipe",
    "path": "../node_modules/photoswipe/dist/",
    "main": "photoswipe.min",
    "resources": [
        "photoswipe-ui-default.min.js",
        "photoswipe.css",
        "default-skin/default-skin.css"
    ]
}

in my package.json, I have:

"@types/photoswipe": "^4.0.27",
"photoswipe": "^4.1.1"

in my .ts module, I have

import PhotoSwipe from 'photoswipe';

The code I use for opening the gallery (just copied from the getting started doc)

imageClicked() { 

    var pswpElement = document.querySelectorAll('.pswp')[0];

    // build items array
    var items = [
        {
            src: 'https://placekitten.com/600/400',
            w: 600,
            h: 400
        },
        {
            src: 'https://placekitten.com/1200/900',
            w: 1200,
            h: 900
        }
    ];

    // define options (if needed)
    var options = {
        // optionName: 'option value'
        // for example:
        index: 0 // start at first slide
    };

    // Initializes and opens PhotoSwipe
    var gallery = new PhotoSwipe<PhotoSwipeUI_Default.Options>(pswpElement as HTMLElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
}

The aurelia project builds ok, but runtime i get this error:

Uncaught ReferenceError: PhotoSwipeUI_Default is not defined

I tried adding export to the aurelia.json bundle

"exports": [ "PhotoSwipe", "PhotoSwipeUI_Default" ]

This didn't change anything.

I tried various import statements:

import PhotoSwipeUI_Default from 'photoswipe'; // Now PhotoSwipeUI_Default is of type PhotoSwipe
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default' // Module not found compile error
import PhotoSwipeUI_Default from 'npm:photoswipe@4.1.1/dist/photoswipe-ui-default.min.js'; // Cannot find module

I am in the dark, and my trial and error method of resolving this is going no where.

What am I missing?

score 2 · Answer 1 · answered Dec 28 '16 at 14:16

2

You need to change up your configuration. You're pointing Aurelia to the minified file which is causing issues apparently. Let the CLI handle minification of the JS files.

{
  "name": "photoswipe",
  "path": "../node_modules/photoswipe/dist/",
  "main": "photoswipe",
  "resources": [
    "photoswipe-ui-default.js"
  ]
}

You can then import using

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

Also, the photoswipe css files load image files for certain things. A current limitation of the Aurelia CLI is that it breaks this sort of thing. This should be fixed before final release. But for now, you'll need to load the CSS using link elements.

  <!-- Core CSS file -->
  <link rel="stylesheet" href="node_modules/photoswipe/dist/photoswipe.css">

  <!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite, 
     - preloader.gif (for browsers that do not support CSS animations) -->
  <link rel="stylesheet" href="node_modules/photoswipe/dist/default-skin/default-skin.css">

Please let me know if this works for you.

answered Dec 28 '16 at 14:16

Ashley Grant

10,879
24
36

Thank you for your answer, and also for preventing my upcoming problem with the css files. I modified the aurelia.json and my imports according to your answer, but I keep getting: "error TS2307: Cannot find module 'photoswipe/photoswipe-ui-default'." – mark Dec 28 '16 at 14:37
When i get back home I'll try it in TypeScript. I've got it working in ESNext though. – Ashley Grant Dec 28 '16 at 14:47
I'm actually running up against a Rock/Hard place problem as I try to solve the problem. I don't get the error you are getting, though. I get "Error: src\app.ts(36,19): error TS2351: Cannot use 'new' with an expression whose type lacks a call or construct signature." I can get rid of that error by doing `import * as PhotoSwipe from "photoswipe";`, but that code fails at runtime. It might be best to post another question regarding this issue, as it isn't really an Aurelia question at that point, it's a TypeScript issue. – Ashley Grant Dec 28 '16 at 16:08
This probably has to do with the d.ts file using namespaces which I don't think is recommended any more. (correct me if I'm wrong though) – Ashley Grant Dec 28 '16 at 16:10
Really appreciate the help. I actually get the TS2351 error at compile time when I use `import * as PhotoSwipe from 'photoswipe';`. I will try to modify the .d.ts file and see if I can get it working. – mark Dec 28 '16 at 16:21
The fix has to happen in the d.ts file. – Ashley Grant Jan 18 '17 at 14:51
d.ts are only type suggestion - in browser everything should work. Now it works for me with `import * as PhotoSwipe from "photoswipe"; import * as PhotoSwipeUI_Default from "photoswipe/dist/photoswipe-ui-default.js";` – piernik Jan 18 '17 at 15:06
Exactly, you have to choose between making the TypeScript compiler happy or the browser runtime happy. I'd typically choose the browser. – Ashley Grant Jan 18 '17 at 15:37

How to import and use PhotoSwipe with Aurelia / Typescript?

1 Answers1

Linked