#Missing export in package

1 messages · Page 1 of 1 (latest)

gleaming wagon
#

Hey all,

I am trying to import the PhotoSwipe npm package into one of my .astro page files and I am getting an error during dev or build time. It looks to be related to Vite, of which I am kinda unfamiliar with:

[plugin:vite:import-analysis]  Missing "./dist/photoswipe-lightbox.esm.js" export in "photoswipe" package

  Stacktrace:
Error: Missing "./dist/photoswipe-lightbox.esm.js" export in "photoswipe" package
    at bail (file:///{{sitepath}}/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:33715:8)
    at resolve (file:///{{sitepath}}/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:33792:10)
   ...

I am using it in the frontmatter of my .astro page as such:

import PhotoSwipeLightbox from "photoswipe/dist/photoswipe-lightbox.esm.js";
import "photoswipe/dist/photoswipe.css";

const lightbox = new PhotoSwipeLightbox({
  gallery: "#my-gallery",
  children: "a",
  pswpModule: () => import("photoswipe/dist/photoswipe.esm.js"),
});

lightbox.init();

Apologies if this isn't specifically an Astro question, but I've tried searching other answers/resources, and can't quite get past this. FWIW, I am new to Astro, but really enjoying it so far.

Thanks in advance for any help!

next otter
#

Nothing in frontmatter is sent to the browser

#

You'd have to put them inside script tags and add a client directive on the component to "hydrate" the script