Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
1 task
savicaleksa opened this issue Dec 12, 2022 · 1 comment
Closed
1 task

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

savicaleksa opened this issue Dec 12, 2022 · 1 comment

Comments

@savicaleksa
Copy link

savicaleksa commented Dec 12, 2022 •
edited
Loading

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.
@savicaleksa
Copy link
Author

Upgrading Vercel adapter and using sharp fixed the issue:
#5568 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@savicaleksa