Skip to content

Instantly share code, notes, and snippets.

@raoulwegat
Last active May 2, 2023 08:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save raoulwegat/417907667c55118966a7b5d6e12f4358 to your computer and use it in GitHub Desktop.
Save raoulwegat/417907667c55118966a7b5d6e12f4358 to your computer and use it in GitHub Desktop.
Including Photoswipe 5.2+ with laravelmix/webpack 4
Photoswipe 5.2 was rewritten in ES6 and it needs to be transpiled to ES5 to work with Laravel Mix 4 (which used Webpack 4).
If you try a regular import as per the Photoswipe docs, it won't work. You'll need to add this webpack config to your
webpack.mix.js and import the modules in your js file as per below.
import PhotoSwipe from 'photoswipe/src/js/photoswipe.js';
import PhotoSwipeLightbox from 'photoswipe/src/js/lightbox/lightbox.js';
import 'photoswipe/src/photoswipe.css';
.webpackConfig({
module: {
// Transpile photoswipe from ES6 to ES5
rules: [
{
test: /\.js$/,
include: [/node_modules\/photoswipe\/src\/js/],
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment