Photoswipe: photoswipe.js gets broken after passing through Babel compiler

[PanzerKunst]

Line 12 of photoswipe.js (})(this, function () {) gets replaced by })(undefined, function () {, because of this: https://phabricator.babeljs.io/T6783.

Same thing in photoswipe-ui-default.js. I solved the issue by replacing both instances of this by window.

[prabhakaran8737]

@PanzerKunst Does this solution solves?

[prabhakaran8737]

Still I could not make it work with

Running the code through Reactjs

var box = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
box.init();  // TypeError: box.init is not a function

[dimsemenov]

This issue will be fixed in the next update.

@prabhakaran8737, If you're using PhotoSwipw with React, this might help – https://github.com/vn38minhtran/react-photoswipe

[prabhakaran8737]

@dimsemenov There is some problem while executing photoswipe through babel

[DenisMir]

@dimsemenov Will there be an update regarding this issue in the future?

[ttomdewit]

Any news on this, @dimsemenov? I'd love to create a PR but wouldn't know where to start. I've tested the workaround provided by @PanzerKunst and can safely say it works _for our case_.

Any update would be greatly appreciated.

If you'd accept a PR where both photoswipe.js and photoswipe-ui-default.js are updated to use window instead of this, I'd gladly provide it. Please note that running grunt with the current setup caused a few deprecation warnings.

[nirfse]

Apparently, I also came across this issue. Either I ditch off babel from gulp, or I get following errors on a web-page:

Uncaught TypeError: Cannot set property 'PhotoSwipe' of undefined
    at photoswipe.min.js:4
    at photoswipe.min.js:4

[ghost]

@nirfse Errors like the one mentioned are indicative something is not working properly. If they are occurring as a result of your asset/build pipeline you may want to start there. When the OP opened this issue they linked to a Babel problem. Unfortunately the Phrabricator link provided has rotted.

[ttomdewit]

@nirfse @jhabdas I seem to remember there's a Babel setting in your .babelrc file that prevents this from happening. I might be mistaken and confuse this with the new import and require functions.

[nirfse]

@jhabdas @ttomdewit Thanks for your replies, I ended up adding this to .babelrc:

{
  "ignore": [
    "./node_modules/photoswipe/dist/photoswipe.min.js",
    "./node_modules/photoswipe/dist/photoswipe-ui-default.min.js"
  ]
}

For some reason, PhotoSwipe was the only problematic library among other sources in my gulp.