Support » Plugin: Lightbox with PhotoSwipe » window.PhotoSwipe is undefined

  • Resolved MarcGuay

    (@marcguay)


    Hi. On my local development version everything works as expected, but in staging and production, the click event listener is never added because window.PhotoSwipe and window.PhotoSwipeUI_Default are undefined (see frontend.js line 14). I’ve turned SCRIPT_DEBUG on, and looking at the page source, the files are being included in the correct order (https://pastebin.pl/view/899da8f3). There are no JS errors in the console. Any ideas?

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Author Arno Welzel

    (@awelzel)

    Sorry, I don’t have any clue what is wrong.

    Just to be sure – my demo version at https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe/ does not show this problem. Does that work for you as well? If so, there must by something going on with other scripts on your staging and production site.

    window.PhotoSwipe and window.PhotoSwipeUI_Default are created by PhotoSwipe itself in wp-content/plugins/lightbox-photoswipe/src/lib/photoswipe.js and wp-content/plugins/lightbox-photoswipe/src/lib/photoswipe-ui-default.js (or the minified version of it in production mode). If there are even no errors in the console, I have no idea at all how to debug this.

    Thread Starter MarcGuay

    (@marcguay)

    Addition info: On my dev server the beginning code in the photoswipe.js file falls into the else condition (root.PhotoSwipe = factory()) while on the staging/prod server it falls into the first condition (define(factory)).

    Plugin Author Arno Welzel

    (@awelzel)

    Very strange – this section depends on the browser and not on the server from which the script is loaded. In fact this part tries to determine what the browser supports and creates window.PhotoSwipe and window.PhotoSwipeUI_Default accordingly. However, this should be exactly the same, no matter from which server the script was loaded.

    Do you use the same browser for dev server and staging/prod? Do the scripts load using the same URL scheme (http/https)? Do you have any kind of script/ad blocker which might interfere here?

    • This reply was modified 1 year, 1 month ago by Arno Welzel.
    Thread Starter MarcGuay

    (@marcguay)

    Thanks for checking this out. Same browser, both SSL, adblock is off.

    Plugin Author Arno Welzel

    (@awelzel)

    Sorry, no idea what is wrong.

    Does https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe/ work for you?

    Thread Starter MarcGuay

    (@marcguay)

    Yes.

    If I dump the values of factory and root.PhotoSwipe they are different.

    root.PhotoSwipe (working):

    ƒ (template, UiClass, items, options){
    
    /*>>framework-bridge*/
    /**
     *
     * Set of generic functions used by gallery.
     * 
     * You're free to modify anything here as long as functionality is kept.
     * 
     */

    factory (not working):

    ƒ () {
    
        'use strict';
        var PhotoSwipe = function(template, UiClass, items, options){
    
    /*>>framework-bridge*/
    /**
     *
     * Set of generic functions used by gallery.
     * 
     * You're free to modify anyt…
    Plugin Author Arno Welzel

    (@awelzel)

    As I said – I have no idea what is wrong here. Any help is appreciated. Feel free to open a issue at https://github.com/arnowelzel/lightbox-photoswipe – maybe someone else finds something.

    • This reply was modified 1 year, 1 month ago by Arno Welzel. Reason: Ups... wrong repository ;-)
    Thread Starter MarcGuay

    (@marcguay)

    Stack Overflow is telling me that the first condition (typeof define === 'function' && define.amd) is checking for the presence of require.js, but I don’t see that package in my project. Perhaps it’s included at the server level?

    Thread Starter MarcGuay

    (@marcguay)

    I believe you linked to the wrong GitHub page above (that project also sounds very interesting, though).

    Plugin Author Arno Welzel

    (@awelzel)

    Maybe some other plugin on your server provides RequireJS or something else which provides the function define() but with a different meaning.

    In fact I never tested PhotoSwipe in combination with RequireJS as I was not even aware that this exists. I just used PhotoSwipe as it is and did some modifications and did not care about this part of the script as it always worked for me and many other users as well.

    I just had a look at https://requirejs.org and https://github.com/requirejs/requirejs. It seems the code for this was last updated three years ago. Maybe it’s a good idea just to remove that part completely.

    Can you please test the following modification:

    In src/lib/photoswipe.js:

    
    (function (root, factory) { 
        if (typeof exports === 'object') {
            module.exports = factory();
        } else {
            root.PhotoSwipe = factory();
        }
    })(this, function () {
    

    In src/lib/photoswipe-ui-default.js:

    
    (function (root, factory) {
        if (typeof exports === 'object') {
            module.exports = factory();
        } else {
            root.PhotoSwipeUI_Default = factory();
        }
    })(this, function () {
    

    If this works, I’ll provide an update with this as soon as possible.

    Thread Starter MarcGuay

    (@marcguay)

    That modification fixes the issue. I’ll continue looking into where RequireJS is being included and leave a comment here if it’s relevant.

    Thread Starter MarcGuay

    (@marcguay)

    An alternative for you would be to support AMD and change the way you reference PhotoSwipe (see the AMD part here https://photoswipe.com/documentation/getting-started.html). This is beyond my JS knowledge.

    Plugin Author Arno Welzel

    (@awelzel)

    I just published version 3.2.3 with the modifications above to keep it working for you. Please let me know if it works in production mode for you as well.

    About using AMD (asynchronous module definition): I understand the advantages of AMD, however for production mode my plugin already provides just one minifed CSS and one minified script which is only about 51 KB small and does not have any dependencies at all – no jQuery or anything else. Furthermore in production mode the script will be placed in the footer and should not harm the website performance significantly. So I am not sure, if AMD will improve anything here.

    Thread Starter MarcGuay

    (@marcguay)

    3.2.3 works, thank you!

    It turned out that AMD was being enabled by embed code provided by Mailchimp for a newsletter signup form (which was included in an HTML widget – tricky to debug since disabling all plugins and using a default theme did not change anything).

    Cheers,
    Marc

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘window.PhotoSwipe is undefined’ is closed to new replies.