Sage 10 + Bud + Photoswipe


I have a problem with the Photoswipe package(photoswipe - npm). I use Sage 10 and Bud builder.


 * @typedef {import('@roots/bud').Bud} bud
 * @param {bud} app
module.exports = async (app) => {
     * Application entrypoints
     * Paths are relative to your resources directory
      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.

     * 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.

     * Development URL to be used in the browser.

Then I load the Gutenberg block as follows:

     * Assets to be enqueued when rendering the block.
     * @return void
    public function enqueue()


import PhotoSwipeLightbox from "photoswipe/lightbox";

const lightbox = new PhotoSwipeLightbox({
  gallery: "#my-gallery",
  children: "a",
  pswpModule: () => import("photoswipe"),


  "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?


Did you add bundle function at the top of block?

use function Roots\bundle;