Bug in index.ts

[DJOCKER-FACE]

// adapted from https://github.com/withastro/astro.build/blob/112bdc723b3ba305997c95d7ce02304624d0d3ce/src/data/showcase/index.ts

import type { ShowcaseSite } from "~/types";
import sitesData from "./sites.json";

const allImages = import.meta.glob<ImageMetadata>("./images/*.{png,jpg,jpeg}", {
  eager: true,
  import: "default",
});

let _loadShowcase: Promise<Array<ShowcaseSite>>;

async function loadShowcase(): Promise<Array<ShowcaseSite>> {
  const sites = await Promise.all(
    sitesData.map(async (site) => {
      if (!(site.image in allImages)) {
        console.error(
          `Image for "${site.title}" not found (provided: "${site.image}")`
        );
      }

      const image = await allImages[site.image];

      return {
        ...site,
        image,
      };
    })
  );

  return sites;
}

export async function getShowcase() {
  _loadShowcase = _loadShowcase || loadShowcase();
  return _loadShowcase;
}

index.ts works well with low number/small images, After I added some 30 images with different sizes, index.ts return undefined src to the Picture component resulting in an error. I'm no ts expert so don't really know why this behavior occurs since we await