@astrojs/image components and helper functions not working on Vercel serverless

What version of `astro` are you using?

1.6.12

Are you using an SSR adapter? If so, which one?

Vercel

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

I was trying to use the getPicture helper function to render responsive pages in my React components, which for some reason didn't work on Vercel. Then I tried doing the same thing but without React components and it still didn't work. Using <Picture /> does not work either. I have a working project on Vercel so I tried downgrading my packages to the version from that project but that didn't work either.

---
import { getPicture } from "@astrojs/image";
import { Picture } from "@astrojs/image/components";

const array: string[] = [
  "https://i.picsum.photos/id/327/1600/900.jpg?hmac=GmHcIPwpwgLkV9bdyFC-0HtppoMUeGDKCho5prcbX0w",
  "https://i.picsum.photos/id/640/1600/900.jpg?hmac=yd2JZfvh1rGjbh39XD0rWjNsUJl_Evkmg9_t7rYniiI",
];
const picturesArray = await Promise.all(
  array.map(
    async (img, i) =>
      await getPicture({
        src: img,
        aspectRatio: 16 / 9,
        widths: [320, 480, 540, 640, 720, 960],
        alt: `Picture ${i}`,
        formats: ["webp", "avif"],
      })
  )
);
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <h1>Astro</h1>
    {
      picturesArray.map((picture, i) => (
        <picture>
          {picture.sources.map((source) => (
            <source {...source} sizes="(min-width: 1024px) 50vw, 100vw" />
          ))}
          <img {...picture.image} />
        </picture>
      ))
    }
    {
      array.map((img, i) => (
        <Picture
          src={img}
          alt={`Picture ${i}`}
          aspectRatio={16 / 9}
          widths={[320, 480, 540, 640, 720, 960]}
          sizes="(min-width: 1024px) 50vw, 100vw"
        />
      ))
    }
  </body>
</html>

<style>
  img {
    max-width: 100%;
    object-fit: cover;
  }
</style>

This is what I've done to reproduce the bug. Everything works in dev but when deployed it just shows this:

Screenshot 2022-12-12 185557

And then this error shows in my vercel functions tab:

Screenshot 2022-12-12 185718

Link to Minimal Reproducible Example

https://github.com/savicaleksa/interstellar-lion

Participation

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

withastro / astro