Astro Content Collections vs. Assets Type Mismatch

[jlarmstrongiv]

Astro Info

Astro                    v3.1.0
Node                     v18.17.1
System                   macOS (x64)
Package Manager          npm

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

No response

Describe the Bug

Type error:

Type 'ImageMetadata' is not assignable to type '{ src: string; width: number; height: number; format: "png" | "jpg" | "jpeg" | "tiff" | "webp" | "gif" | "svg"; }'.
  Types of property 'format' are incompatible.ts(2322)
config.ts(18, 7): The expected type comes from property 'heroImage' which is declared here on type 'IntrinsicAttributes & { updatedDate?: Date | undefined; title: string; description: string; pubDate: Date; heroImage: { src: string; width: number; height: number; format: "png" | ... 5 more ... | "svg"; }; }'

Astro asset types:

interface ImageMetadata {
    src: string;
    width: number;
    height: number;
    format: InputFormat;
}
type InputFormat = "avif" | "png" | "webp" | "jpeg" | "jpg" | "svg" | "tiff" | "gif"

Astro content types:

    // This needs to be in sync with ImageMetadata
    export type ImageFunction = () => import('astro/zod').ZodObject<{
        src: import('astro/zod').ZodString;
        width: import('astro/zod').ZodNumber;
        height: import('astro/zod').ZodNumber;
        format: import('astro/zod').ZodUnion<
            [
                import('astro/zod').ZodLiteral<'png'>,
                import('astro/zod').ZodLiteral<'jpg'>,
                import('astro/zod').ZodLiteral<'jpeg'>,
                import('astro/zod').ZodLiteral<'tiff'>,
                import('astro/zod').ZodLiteral<'webp'>,
                import('astro/zod').ZodLiteral<'gif'>,
                import('astro/zod').ZodLiteral<'svg'>,
            ]
        >;
    }>;

What's the expected result?

No type errors.

Link to Minimal Reproducible Example

https://github.com/withastro/astro/files/12644675/astro-types-mismatch.zip

Participation

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

[jlarmstrongiv]

CC @TheOtterlord from Discord and @Princesseuh from #8518

[jlarmstrongiv]

For the reproduction:

• downlod the zip
• unzip to a folder
• cd to the folder
• run npm install
• run astro dev
• check out these pages
  • src/pages/about.astro
  • src/content/config.ts

[Princesseuh]

Fixed by #8568