Photoswipe works on localhost, but not hosted using @astrojs/vercel.

[jonasfroeller]

Astro Info

Astro                    v4.8.3
Node                     v18.19.0
System                   Windows (x64)
Package Manager          npm
Output                   hybrid
Adapter                  @astrojs/vercel/serverless
Integrations             @astrojs/starlight

If this issue only occurs in one browser, which browser is a problem?

Only tested in Chrome and Tor.

Describe the Bug

I have a component for Photoswipe:

PhotoswipeImage.astro:

---
import type { ImageMetadata } from "astro";
import { Image, getImage } from "astro:assets";

interface Props {
	imageFolder: string;
}

const { imageFolder } = Astro.props;
const images = import.meta.glob<{ default: ImageMetadata }>("../assets/**");
const imagePaths = Object.keys(images).filter((imagePath) => {
	return imagePath.startsWith(`../assets/${imageFolder}/`);
});
---

<div
	id="gallery"
	class="container grid grid-cols-2 gap-2 px-2 pb-2 mx-auto md:grid-cols-3"
>
	{
		imagePaths.map(async (imagePath) => {
			let image = images[imagePath]();
			let optimizedImage = await getImage({
				src: image,
				width: 1920,
			});

			return (
				<a
					href={optimizedImage.src}
					data-pswp-width={optimizedImage.attributes.width}
					data-pswp-height={optimizedImage.attributes.height}
					target="_blank"
					class="overflow-hidden rounded-md border-[1px] border-primary hover:border-secondary"
				>
					<Image
						src={image}
						alt={"I am an image"}
						class={
							"object-cover w-full grayscale-[80%] hover:grayscale-0 transition duration-300 ease-in-out aspect-[3/2]"
						}
					/>
				</a>
			);
		})
	}
</div>

<script>
	import PhotoSwipeLightbox from "photoswipe/lightbox";
	import "photoswipe/style.css";

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

	lightbox.init();
</script>

and I use it like this:

create-monitor.mdx:

import PhotoSwipe from "../../../components/PhotoswipeImage.astro";
 
<PhotoSwipe imageFolder="create-monitor" />

The problem is, that it only works in development and not in production.
I can click on the image and get a lightbox that lets me zoom in development. In production, the js seems to load, but if I click the image, it is opened in a new tab or the lightbox appears in the end of the document and not absolute.

I think the adapter is the problem and not starlight, meaning the demo link is pretty useless, because it is running the dev server too, which works...

What's the expected result?

The same result I get using the development server.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-qtp7bk?file=src%2Fcontent%2Fdocs%2Findex.mdx

Participation

• I am willing to submit a pull request for this issue.

[Trombach]

@jonasfroeller I'm not sure about this, but does astro support importing style sheets in client side scripts? In the docs there is only mention of importing them in the front matter. Could you try moving the style import to the front matter?

Edit: this could also be related to #7761. Have you tried using the component in a plain astro file and not MDX? Does that fix the issue in prod?

[jonasfroeller]

Trombach

I'm not sure about this, but does astro support importing style sheets in client side scripts?

Maybe that is the problem. I will try it like it is explained in the docs.
It worked! Thank you!