Last active
May 2, 2023 08:16
-
-
Save raoulwegat/417907667c55118966a7b5d6e12f4358 to your computer and use it in GitHub Desktop.
Including Photoswipe 5.2+ with laravelmix/webpack 4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import PhotoSwipe from 'photoswipe/src/js/photoswipe.js'; | |
import PhotoSwipeLightbox from 'photoswipe/src/js/lightbox/lightbox.js'; | |
import 'photoswipe/src/photoswipe.css'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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