Sage 10 + Bud + Photoswipe

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?

Hey,

Did you add bundle function at the top of block?

use function Roots\bundle;