Hello,
I have a problem with the Photoswipe package(photoswipe - npm). I use Sage 10 and Bud builder.
bud.config.js
/**
* @typedef {import('@roots/bud').Bud} bud
*
* @param {bud} app
*/
module.exports = async (app) => {
app
/**
* Application entrypoints
*
* Paths are relative to your resources directory
*/
.entry({
app: ["@scripts/app", "@styles/app"],
editor: ["@scripts/editor", "@styles/editor"],
gallery: ["@scripts/gallery", "@styles/gallery"],
})
/**
* These files should be processed as part of the build
* even if they are not explicitly imported in application assets.
*/
.assets("images")
/**
* These files will trigger a full page reload
* when modified.
*/
.watch("resources/views/**/*", "app/**/*")
/**
* Target URL to be proxied by the dev server.
*
* This should be the URL you use to visit your local development server.
*/
.proxy("http://tgagarage.test")
/**
* Development URL to be used in the browser.
*/
.serve("http://0.0.0.0:3000");
};
Then I load the Gutenberg block as follows:
/**
* Assets to be enqueued when rendering the block.
*
* @return void
*/
public function enqueue()
{
//
bundle('gallery')->enqueue();
}
gallery.js
import PhotoSwipeLightbox from "photoswipe/lightbox";
const lightbox = new PhotoSwipeLightbox({
gallery: "#my-gallery",
children: "a",
pswpModule: () => import("photoswipe"),
});
lightbox.init();
manifest.json
{
"app.css": "app.8e4006.css",
"app.js": "app.4d9b82.js",
"editor.css": "editor.31d6cf.css",
"editor.js": "editor.0e16c0.js",
"gallery.css": "gallery.bcf411.css",
"gallery.js": "gallery.e8ca47.js",
"runtime.js": "runtime.9964c0.js",
"vendor/null.js": "vendor/null.1cdb19.js",
"vendor/gallery.js": "vendor/gallery.e81b05.js",
".gitkeep": ".gitkeep.31d6cf"
}
During the build, the vendor/null file is created as can be seen in manifest.json
However, when using the gallery, this file returns 404, I think it’s because of the path.
Did anyone happen to have a similar problem or advice on how to solve it?